DatePicker 日期选择请使用手机扫码体验

基本用法

日期选择（不显示中文）

html
<nut-datepicker 
    :is-visible="isVisible"
    type="date"
    title="请选择日期" 
    :is-show-chinese="false"
    @close="switchPicker('isVisible')"
    @choose="setChooseValue"
>
</nut-datepicker>

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

html
<nut-datepicker 
    :is-visible="isVisible1"
    title="请选择日期" 
    type="date"
    startDate="1991-11-10"
    endDate="2019-10-05"
    @close="switchPicker('isVisible1')"
    @choose="setChooseValue1"
>
</nut-datepicker>

日期时间选择（有默认值，限制开始结束时间）

html
<nut-datepicker 
    :is-visible="isVisible2"
    title="请选择日期时间" 
    type="datetime"
    startDate="1991-11-10"
    endDate="2019-10-05"
    defaultValue="2018-11-02 11:08"
    @close="switchPicker('isVisible2')"
    @choose="setChooseValue2"
>
</nut-datepicker>

时间选择（12小时制）

html
<nut-datepicker 
    :is-visible="isVisible3" 
    type="time"
    title="请选择时间" 
    @close="switchPicker('isVisible3')"
    @choose="setChooseValue3"
    :is-use12-hours="true"
    defaultValue="01:07"
    :is-am="false"
>
</nut-datepicker>

时间选择（限制开始结束小时）

html
<nut-datepicker 
    :is-visible="isVisible4"
    type="time"
    title="请选择时间" 
    startHour="8"
    endHour="18"
    defaultValue="09:06"
    @close="switchPicker('isVisible4')"
    @choose="setChooseValue4"
>
</nut-datepicker>

时间选择（分钟数递增步长设置）

html
<nut-datepicker 
    :is-visible="isVisible5"
    type="time"
    title="请选择时间" 
    :minute-step="5"
    defaultValue="10:30"
    @close="switchPicker('isVisible5')"
    @choose="setChooseValue5"
>
</nut-datepicker>

javascript
export default {
    data() {
        return {
            isVisible: false,
            isVisible1: false,
            isVisible2: false,
            isVisible3: false,
            isVisible4: false,
            isVisible5: false,
            date: null,
            date1: null,
            datetime: '2018-11-02 11:08',
            time: '01:07',
            time1: '09:06',
            time2: '10:30',
            amOrPm: 'PM'
        };
    },
    methods: {
        switchPicker(param) {
            this[`${param}`] = !this[`${param}`];
        },
        setChooseValue(param) {
            this.date = param[3];
        },
        setChooseValue1(param) {
            this.date1 = param[3];
        },
        setChooseValue2(param) {
            this.datetime = param[5];
        },
        setChooseValue3(param) {
            this.amOrPm = param[2] == '上午' ? 'AM' : 'PM';
            this.time = param[3];
        },
        setChooseValue4(param) {
            this.time1 = param[2];
        },
        setChooseValue5(param) {
            this.time2 = param[2];
        }
    }
}

Prop

Event