最近公司項目中用到出生日期的功能，使用了 Mint UI 中的 Datetime picker，遇到的問題記錄一下。

1、Datetime picker 效果

既然是選擇出生日期，那可選日期當(dāng)然需要做一些限制，粗略地處理為 1900-01-01 ~ 當(dāng)前時間。注意到文檔中的 startDate 和 endDate 可以控制起止時間，但是沒有說明如何使用，源碼中也沒有例子。如果我們直接設(shè)置時間格式的字符串，如 startDate: "1901-01-01"，這樣寫是會報錯的。

根據(jù)上圖可以看出傳入 startDate 的值必須是 Date 類型，所以按下面的寫法就可以了：

startDate: new Date("1901-01-01"),
endDate: new Date()

##2、實現(xiàn)效果
<!--出生日期的picker-->
<mt-datetime-picker ref="birthdayPicker" type="date" v-model="user.usbirthday" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日"
             :startDate="startDate" :endDate="endDate" @confirm="handleChange">
</mt-datetime-picker>

v-model="user.usbirthday"中的 user.usbirthday 可以設(shè)置成 this.user.usbirthday = 1995-01-01。

// 打開date-picker
openPicker(picker) {
    this.$refs[picker].open();
},
// picker選擇的日期改變
handleChange(value) {
    this.birthday = moment(value).format('YYYY-MM-DD');
}

3、引入 Moment.js

隨筆中的代碼涉及了 Moment.js，這是一個用來格式化時間的 js 插件，比如下圖的時間不便于前端使用，則可以通過 Moment.js 將其轉(zhuǎn)化為 2018-11-19 等格式的時間。
安裝方式： npm install moment

中文官網(wǎng)： http://momentjs.cn/

Github： https://github.com/moment/moment/

然后在 main.js 中添加下面兩行代碼來引入 Moment.js：

// 引入moment用來格式化時間
import moment from "moment";
Vue.prototype.$moment = moment;

let date = moment(new Date("1901-01-01")).format("YYYY-MM-DD HH:mm:ss");
let now = moment(new Date()).format("YYYY-MM-DD HH:mm:ss");

console.log(date);        // 1901-01-01 08:00:00
console.log(now);         // 2018-11-19 19:20:06

轉(zhuǎn)載：劉先玉先生
鏈接：https://liuxy0551.github.io/article/data-time-picker.html