最近公司项目中用到出生日期的功能,使用了 Mint UI 中的 Datetime picker,遇到的问题记录一下。
1、Datetime picker 效果
既然是选择出生日期,那可选日期当然需要做一些限制,粗略地处理为 1900-01-01 ~ 当前时间。注意到文档中的 startDate 和 endDate 可以控制起止时间,但是没有说明如何使用,源码中也没有例子。如果我们直接设置时间格式的字符串,如 startDate: "1901-01-01",这样写是会报错的。
根据上图可以看出传入 startDate 的值必须是 Date 类型,所以按下面的写法就可以了:
startDate: new Date("1901-01-01"),
endDate: new Date()
##2、实现效果
<!--出生日期的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 可以设置成 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 将其转化为 2018-11-19 等格式的时间。
安装方式: npm install moment
中文官网: 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
转载:刘先玉先生
链接:https://liuxy0551.github.io/article/data-time-picker.html