Calendar 日历请使用手机扫码体验

基本用法

日期选择（不带默认日期）

html
<nut-calendar 
    :is-visible="isVisible"
    :default-value="date"
    @close="switchPicker('isVisible')"
    @choose="setChooseValue"
    :start-date="`2018-10-11`"
    :end-date="`2020-11-11`"
>
</nut-calendar>

日期选择（有默认日期，选择后自动回填）

html
<nut-calendar 
    :is-visible="isVisible2"
    :default-value="date2"
    :is-auto-back-fill="true"
    @close="switchPicker('isVisible2')"
    @choose="setChooseValue2"
>
</nut-calendar>

日期区间选择（有默认日期）

html
<nut-calendar 
    :is-visible="isVisible1"
    :default-value="date1"
    type="range"
    @close="switchPicker('isVisible1')"
    @choose="setChooseValue1"
>
</nut-calendar>

日期区间选择（不限制开始结束时间）

html
<nut-calendar 
    :is-visible="isVisible3"
    :default-value="date3"
    type="range"
    :start-date="null"
    :end-date="null"
    :animation="`nutSlideUp`"
    @close="switchPicker('isVisible3')"
    @choose="setChooseValue3"
>
</nut-calendar>

javascript
export default {
    data() {
        return {
            isVisible: false,
            isVisible1: false,
            isVisible2: false,
            isVisible3: false,
            date: null,
            dateWeek: null,
            date1: ['2018-12-22', '2019-01-08'],
            date2: Utils.getDay(30), // 当前日期之后的30天
            date3: null
        };
    },
    methods: {
       switchPicker(param) {
            this[`${param}`] = !this[`${param}`];
        },
        setChooseValue(param) {
            this.date = param[3];
            this.dateWeek = param[4];
        },
        setChooseValue1(param) {
            this.date1 = [...[param[0][3],param[1][3]]];
        },
        setChooseValue2(param) {
            this.date2 = param[3];
        },
        setChooseValue3(param) {
            this.date3 = [...[param[0][3],param[1][3]]];
        }
    }
};

Prop

Event