日期时间选择器 | Datetime picker
Datetime picker
日期时间选择器,支持自定义类型。
引入
import { DatetimePicker } from 'mint-ui';
Vue.component(DatetimePicker.name, DatetimePicker
例子
v-model
属性为组件的绑定值。
type
属性表示 datetime-picker
组件的类型,它有三个可能的值:
datetime
: 日期时间选择器,可选择年、月、日、时、分,value
值为一个Date
对象
datetime-picker
提供了两个供外部调用的方法:open
和 close
,分别用于打开和关闭选择器。
<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 | 小时的最小可选值 | Number | 0 | |
endHour | 小时的最大可选值 | Number | 23 | |
yearFormat | 年份模板 | String | '{value}' | |
monthFormat | 月份模板 | String | '{value}' | |
dateFormat | 日期模板 | String | '{value}' | |
hourFormat | 小时模板 | String | '{value}' | |
minuteFormat | 分钟模板 | String | '{value}' |
Events
事件名称 | 说明 | 回调参数 |
---|---|---|
confirm | 点击确认按钮时的回调函数 | 目前的选择值 |