官方文档:
https://mint-ui.github.io/docs/#/zh-cn2/datetime-picker
注意官方文档内容不全
显示日期
<span >{{form.date}}</span >
按钮
<mt-button @click.native="openPicker">选择日期</mt-button>
日期选择控件,不显示,需要点击上面按钮才能显示
v-model="date"用于初始化日期
@confirm="handleConfirm" 点击确定按钮时的回调函数,形参是选中的日期时间
<mt-datetime-picker
ref="picker"
type="date"
v-model="date"
@confirm="handleConfirm"
>
</mt-datetime-picker>
new Vue({
el: '#app',
data:function(){
return{
date:'',
form:{
date:'',// 用于显示到页面上的日期时间
}
}
},
mounted(){
let dateObj = new Date()
// 用到 dayjs格式化日期
this.form.date = dayjs(dateObj).format("YYYY-MM-DD")
// 给日期时间选择控件设置初始化日期,即当前日期时间
this.date = dateObj
},
methods: {
openPicker() {
this.$refs.picker.open();
},
handleConfirm(value){
this.form.date = dayjs(value).format("YYYY-MM-DD");
},
}
})