datepicker/src/datepicker.riot

<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) }}>
                    &lArr;
                </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) }}>
                    &rArr;
                </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) }}>
                    &lArr;
                </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) }}>
                    &rArr;
                </button>
            </div>
        </div>
    </div>

    <script>

        // mixin
        import datepickerMixin from './mixin.js'

        export default () => {
            return {

                ...datepickerMixin

            }
        }
    </script>
</tiny-datepicker>