在线文档教程

日期时间选择器 | Datetime picker

Datetime picker

日期时间选择器,支持自定义类型。

引入

import { DatetimePicker } from 'mint-ui'; Vue.component(DatetimePicker.name, DatetimePicker

例子

v-model 属性为组件的绑定值。

type 属性表示 datetime-picker 组件的类型,它有三个可能的值:

  • datetime: 日期时间选择器,可选择年、月、日、时、分,value 值为一个 Date 对象

datetime-picker 提供了两个供外部调用的方法:openclose,分别用于打开和关闭选择器。

<template> <mt-datetime-picker ref="picker" type="time" v-model="pickerValue"> </mt-datetime-picker> </template> <script> export default { methods: { openPicker() { this.$refs.picker.open( } } }; </script>

可以为选项提供自定义模板。模板须为一个包含了 {value} 的字符串,{value} 会被解析为相应选项的值。

<mt-datetime-picker v-model="pickerVisible" type="date" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日"> </mt-datetime-picker>

当点击确认按钮时会触发 confirm 事件,参数为当前 value 的值。

<mt-datetime-picker v-model="pickerVisible" type="time" @confirm="handleConfirm"> </mt-datetime-picker>

API

参数说明类型可选值默认值
type组件的类型String'datetime', 'date', 'time''datetime'
cancelText取消按钮文本String'取消'
confirmText确定按钮文本String'确定'
startDate日期的最小可选值Date十年前的 1 月 1 日
endDate日期的最大可选值Date十年后的 12 月 31 日
startHour小时的最小可选值Number0
endHour小时的最大可选值Number23
yearFormat年份模板String'{value}'
monthFormat月份模板String'{value}'
dateFormat日期模板String'{value}'
hourFormat小时模板String'{value}'
minuteFormat分钟模板String'{value}'

Events

事件名称说明回调参数
confirm点击确认按钮时的回调函数目前的选择值