<span>入住</span>
<span class="checkin_date">{{checkinDate}}</span>
<mt-datetime-picker
v-model="checkinDateVal"
ref="checkin_picker"
type="date"
:startDate="startDate"
:endDate="endDate"
@confirm="checkinConfirm"
@cancel="checkinCancel"
>
</mt-datetime-picker>
<span>离店</span>
<span class="checkout_date">{{checkoutDate}}</span>
<mt-datetime-picker
v-model="checkoutDateVal"
ref="checkout_picker"
type="date"
:startDate="startDate"
:endDate="endDate"
>
</mt-datetime-picker>
data () {
return {
checkinDate:'',
checkoutDate:'',
checkoutDateVal:'',
checkinDateVal:'',
startDate:new Date('2018-03-01'),
endDate:new Date('2018-03-31'),
}
},
methods:{
checkinopenPicker(){
this.$refs.checkin_picker.open();
},
checkinCancel(){
this.$refs.checkin_picker.close();
},
checkinConfirm(){
this.$refs.checkin_picker.close();
},
}
可以开启日历选择器,但是点击取消或者确认都关闭不了选择器,但是能输出日期的value,也就是点击是有效的
我也遇到了,已经解决,供参考:
之前是这样的

后来修改后
然后就可以了