Mint UI中，Datetime Picker时间选择器的使用方法，最大可选值endDate用法

• 2021-04-15
  用Mint UI的时候一不留神踩了个大坑，记一下…
  （因为Mint UI官方文档已经没有人维护了，所以上面有些方法不好用了，这是背景）

一、引入

这个没什么问题，直接复制官方代码放到入口文件main.js里面：

import { DatetimePicker } from 'mint-ui';
Vue.component(DatetimePicker.name, DatetimePicker);

二、添加组件

这里不要按照官方文档了，我浪费了一个半小时在这里就是因为太轻信官方文档了

<mt-datetime-picker v-model="datetime" ref="datetimePicker" type="datetime" @confirm="this.changeTime">
</mt-datetime-picker>

• v-model：这个大家都懂，他的值和哪个变量绑定
• ref：用这个来绑定我们添加的组件，控制打开它，官方的:visible.sync="pickerVisible"没有用
• type：组件类型，可选datetime、date、time
• @confirm：绑定点击确定按钮需要调用的事件

js部分：

//打开时间选择器
openDatetime(){
	this.$refs.datetimePicker.open();
},
//时间选择器选中
changeTime(value) {
	console.log(value);		//自带的value就是选中的时间
}

三、时间格式处理

Datetime Picker组件返回的时间格式是固定的，比如datetime返回的格式为Date对象，
但是有些地方我们需要固定的时间格式，比如 年-月-日 时:分，所以添加一个格式处理：

//打开时间选择器
openDatetime(){
	this.$refs.datetimePicker.open();
},
//更改时间
changeTime(value) {
	this.time = this.formatDate(value)；
},
//更改时间格式
formatTen(num) {
    return num > 9 ? (num + "") : ("0" + num);
},
formatDate(date) {
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    var hour = date.getHours();
    var minute = date.getMinutes();
    var second = date.getSeconds();
    return year + '-' + this.formatTen(month) + '-' + this.formatTen(day) + ' '+ this.formatTen(hour) + ':'+ this.formatTen(minute);
}

四、其他

官方文档：点击这里查看官方文档

---

• 2021-04-21
  OK~ 新需求，需要这个日期的最大可选值设置为当前时间，也就是说只能选择现在和现在以前的时间。

一、踩坑记录

第一时间我想到的肯定是去查官方文档，官方文档看起来使用方法很简单，添加一个endDate属性，设置最大可选时间就可以了

<mt-datetime-picker v-model="datetime" ref="datetimePicker" type="datetime" @confirm="this.changeTime" endDate="new Date()">
</mt-datetime-picker>

当然这个方法肯定是不能用的，要不然我也不至于特别记下来怎么设置最大时间。报的错是 endDate.getFullYear() is not a function，endDate不是当做一个属性被编译，而是被当作一个变量被编译了，所以说明这个用法是错误的。

二、正确用法

在查过很多文档之后，终于找到了正确的用法：

<mt-datetime-picker v-model="datetime" ref="datetimePicker" type="datetime" @confirm="this.changeTime" :end-date="endDate">
</mt-datetime-picker>

在date里面给endDate赋值,比如我这里只能选择今天及之前的日期： endDate: new Date()

（PS：如果你还没选好要用的UI库，选别的吧，别选MintUI了，官方文档全是坑就不说了，重点是用的人很少，网上的文档也不多，踩一个坑真的费半天劲才能爬出来）