更新记录

0.1（2022-01-16）

1.0.1版本插件上传 2.支持多个日期范围选择

平台兼容性

mr-calendar

组件功能

1. 日历功能
2. 向下滑动
3. 禁用日期
4. 双向绑定
5. 类型
   1. 单选
   2. 多选
   3. 范围
   4. 多选范围
6. 自定义日期
7. 事件
   1. click事件
   2. close
   3. submit

组件API设计

mr-calendar Attributes

selectedDate

const customDate = [
    {
        cellClass: 'custom-cell',
        date: '2022-01-16',
        top: [
            {
                class: 'custom-cell-top-1',
                text: '6'
            }
            ]
    }
    ]

mr-calendar Events

//使用示例
<template>
    <view>
        <!-- 日历组件demo -->
        <mr-calendar ref="calendar" :visible.sync="show" :disabledDate="disabledDate" v-model="date" type="multiple-range"
            :custom-date="customDate" :drawer="drawer" format="YYYY-MM-DD" @click="calclick" @change="daychange"
            @submit="submit">
        </mr-calendar>
    </view>
</template>

<script>
    import mrCalendar from '@/components/mr-calendar/mr-calendar';
    export default {
        components: {
            mrCalendar
        },
        data() {
            return {
                show: true,
                drawer: false,
                date: '',
                customDate: [{
                    cellClass: 'custom-cell',
                    date: '2022-01-24',
                    top: [{
                            class: 'custom-cell-top-1',
                            text: '①'
                        },
                        // {
                        //  class: 'custom-cell-top-2',
                        //  text: '6'
                        // }
                    ]
                }]
            }
        },
        methods: {
            disabledDate(date) {
                const start = new Date('2022/1/10').getTime();
                const end = new Date('2022/6/30').getTime();
                return date.getTime() <= start || date.getTime() >= end;
            },
            submit(e) {
                console.log(e, 'eeee')
            },
            calclick(e) {
                console.log(e, 'calclick')
            },
            daychange(e) {
                console.log(e, 'daychange')
            },
        }
    }
</script>