日期时间选择器 | 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