You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
63 lines
2.5 KiB
63 lines
2.5 KiB
<tiny-datepicker>
|
|
<div class="tiny-datepicker">
|
|
<div class="tiny-datepicker__calendar">
|
|
<div class="tiny-datepicker__date">
|
|
{ state.date.format('dddd, DD. MMMM YYYY') }
|
|
</div>
|
|
|
|
<div class="tiny-datepicker__days">
|
|
<div class="tiny-datepicker__week">
|
|
<div class="tiny-datepicker__day tiny-datepicker__day--header" each={ name in state.weekdaysNames }>
|
|
{ name }
|
|
</div>
|
|
</div>
|
|
<div class="tiny-datepicker__week" each={ week in state.weeks }>
|
|
<div class="{ addClassDay(day, ['tiny-datepicker__day']) }" each={ day in week } onclick={ (event) => { handleSelectDay(event, day) }}>
|
|
{ day.date() }
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tiny-datepicker__select m-top-3 m-bottom-3">
|
|
<button class="button m-bottom-0 tiny-datepicker__button" onclick={ () => { handlePreviousMonth(event) }}>
|
|
⇐
|
|
</button>
|
|
<div class="tiny-datepicker__label m-top-3 m-bottom-3">
|
|
<select class="field-choice" onchange={ (event) => { handleSelectMonth(event) }}>
|
|
<option each={ (name, index) in state.monthNames } value={ index } selected={ state.date.month() === index }>{ name }</option>
|
|
</select>
|
|
</div>
|
|
<button class="button m-bottom-0 tiny-datepicker__button" onclick={ () => { handleNextMonth(event) }}>
|
|
⇒
|
|
</button>
|
|
</div>
|
|
|
|
<div class="tiny-datepicker__select m-top-3 m-bottom-3">
|
|
<button class="button m-bottom-0 tiny-datepicker__button" onclick={ () => { handlePreviousYear(event) }}>
|
|
⇐
|
|
</button>
|
|
<div class="tiny-datepicker__label">
|
|
<input class="field-text" value="{ state.date.format('YYYY') }" onkeyup={ (event) => { handleSelectYear(event) }} />
|
|
</div>
|
|
<button class="button m-bottom-0 tiny-datepicker__button" onclick={ () => { handleNextYear(event) }}>
|
|
⇒
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
// mixin
|
|
import datepickerMixin from './mixin.js'
|
|
|
|
export default () => {
|
|
return {
|
|
|
|
...datepickerMixin
|
|
|
|
}
|
|
}
|
|
</script>
|
|
</tiny-datepicker>
|