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;
    },
  }

查看效果，妥妥的。 只想說一句文檔坑爹。

查看文檔的時候，查看這個版本 。下面的中文版不齊全，上面的版本纔有正確的接口提示和用法！！！