vue Mint ui 日期时间选择控件

官方文档:
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");
    },
  }
})

原文出处:/show_1IX888b3zDv5.html