mint-ui popup datetime-picker

最新推荐文章于 2023-03-07 17:05:49 发布

原创最新推荐文章于 2023-03-07 17:05:49 发布 · 487 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#mint-ui #datetime-picker #教程

技术文档专栏收录该内容

8 篇文章

订阅专栏

本文介绍了mint-ui中datetime-picker的使用方法，包括ref用于显示和关闭，type有datetime、date、time三种类型及对应value值，v-model获取输入值，还有cancel、confirm回调函数，startDate和endDate的时间限制，以及关闭穿透滑动问题。

        <mt-datetime-picker
                :startDate="bookDateLimit().firstDate"
                :endDate="bookDateLimit().endDate"
                :closeOnClickModal="false"
                v-model="pickerValue"
                type="date"
                ref="DatePicker"
                year-format="{value} 年"
                month-format="{value} 月"
                date-format="{value} 日"
                @cancel="handleDateCancle"
                @confirm="handleDateConfirm">
        </mt-datetime-picker>

ref：用于显示和关闭使用

    openPicker () {
      this.$refs.datePicker.open()
    },

type：
datetime: 日期时间选择器，可选择年、月、日、时、分，value 值为一个 Date 对象
date: 日期选择器，可选择年、月、日，value 值为一个 Date 对象
time: 时间选择器，可选择时、分，value 值为一个格式为 HH:mm 的字符串
v-model：获取输入值
cancel：取消按钮回调函数
confirm：确定按钮回调函数
startDate：开始时间限制
endDate：结束时间限制

关闭穿透华滑动问题：

document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, { passive: false })// 阻止默认事件