Компонент выбора даты на Vue.js для мобильных устройств

Компонент календаря для мобильных устройств, разработанный на основе Vue.js, не идеален, поэтому был создан собственный облегчённый компонент выбора даты. Код содержит комментарии, а при наличии уникальных требований можно добавить собственные точки входа.

Пример использования

Этот компонент уже используется в другом проекте — в разработанном на Vue.js мобильном приложении магазина в WeChat. В настоящее время он находится в разработке. EasyMALL

Инструкция по использованию

Чтобы использовать компонент, достаточно импортировать файл timepicker.vue в проект на Vue.js с помощью webpack.

Точки входа компонента

• handlerSelect — функция обратного вызова события клика пользователя по дате. Параметр функции — текущий объект даты.
• handlerComfirm — функция обратного вызова события подтверждения даты пользователем. Параметр функции — текущий объект даты.
• handlerCancel — функция обратного вызова при отмене выбора даты пользователем.

Пример HTML-кода

        <m-cell title="生日" :value="info.birthday | timeStampFormat"
        @click.native="interact.timePickerShow = !interact.timePickerShow"></m-cell>


        <m-timepicker
        @update:show="val => interact.timePickerShow = val" :show="interact.timePickerShow"
        @handlerComfirm="selectDay"/>

Пример JavaScript-кода

<script>
    import MTimepicker from '../componets/MTimepicker'
    export default {
        data() {
            return {
                interact: {
                    timePickerShow: false
                },
                info: {
                    birthday: 775197285000
                }
            }
        },
        components:{
            MTimepicker
        },
        methods: {
            selectDay(e) {
                this.info.birthday = e.getTime();
            },
        }
    }
</script>