Mint UI 日期时间选择器-Datetime Picker

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

引入

import { DatetimePicker } from 'mint-ui';

Vue.component(DatetimePicker.name, DatetimePicker);

例子

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

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

• ​datetime​: 日期时间选择器，可选择年、月、日、时、分，value 值为一个 Date 对象
• ​date​: 日期选择器，可选择年、月、日，value 值为一个 Date 对象
• ​time​: 时间选择器，可选择时、分，value 值为一个格式为 HH:mm 的字符串

​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

Events