mint-ui 时间选择器Datetime Picker的用法介绍。

官方文档坑爹啊，调用mint-ui中的Datetime Picker显示，必须使用该组件的open()方法。以前版本的有介绍，新版本就压根没提这档子事，干的漂亮！

---

下面详解一下用法！
首先，你得有一个元素来控制显示选择好的数据，这里我是通过控制isClicked的布尔值来显示。year变量的值就是选择后的值。

selectYear函数是用来调用组件的open()事件。
isClicked属性用来控制显示默认的 年 还是选择后的时间。
year属性的值表示选择好的时间。

    <div class="selector selectYear" @click="selectYear">
      <div class="show_year">
        <p v-if="!isClicked">年</p>
        <p v-if="isClicked">{{year}}</p>
        <i class="icon"></i>
      </div>
    </div>

---

上面的代码只是控制显示，下面的代码才是实际上的Datatime Picker组件。

1. v-model中绑定的dateValue属性表示点击datatime picker的值，该值初始值即为datatime
2. picker的初始值。如果为空，则datatime picker的默认值为最小值。picker的初始值。如果为空，则datatime picker的默认值为最小值。
3. type表示类型，有date，datetime，time三种，官网介绍的没问题。type表示类型，有date，datetime，time三种，官网介绍的没问题。
4. ref用来给元素或者子组件注册引用信息的，这里是方便我们待会调用datatime picker的open方法，坑爹这里文档只字不提。
5. year-format、…这3个表示待会date picker显示的值，和文档一样 后面的属性都和文档一样，这里没问题。

    <mt-datetime-picker 
    v-model="dateValue" 
    type="date" 
    ref="datePicker" 
    year-format="{value} 年" 
    month-format="{value} 月" 
    date-format="{value} 日" 
    :endDate="new Date()" 
    @confirm="handleConfirm">
    </mt-datetime-picker>

---

data中设置的属性：

isClicked属性用来控制显示默认的 年 还是选择后的时间。
year属性的值表示选择好的时间。
v-model中绑定的dateValue属性表示点击datatime picker的值，该值初始值即为datatime

---

methods中的方法如下：

selectYear方法调用组件的open()
handleConfirm 方法默认传参为选择好的时间数值，是Date格式的。

  methods: {
    selectYear () {
      this.$refs.datePicker.open();
    },
    handleConfirm (value) {
      console.log(value);
      this.year = value.getFullYear();
      this.month = value.getMonth() + 1;
      this.date = value.getDate();
      this.isClicked = true;
    },
  }

查看效果，妥妥的。 只想说一句文档坑爹。

查看文档的时候，查看这个版本 。下面的中文版不齐全，上面的版本才有正确的接口提示和用法！！！