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 ?提供了兩個供外部調(diào)用的方法：?open ?和 ?close?，分別用于打開和關(guān)閉選擇器。

<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}? 會被解析為相應(yīng)選項的值。

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

當(dāng)點擊確認按鈕時會觸發(fā) ?confirm? 事件，參數(shù)為當(dāng)前 ?value? 的值。

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

API

Events