Vue Mint-UI Datetime picker 中的起始时间和结束时间

た入场券 2023-02-21 12:59 15阅读 0赞

## Vue Mint-UI Datetime picker 中的起始时间和结束时间 ##

### Datetime picker 效果 ###

#### 1、官网效果 ####

![img][]

官网上给出了一些 API 文档，但是 [Mint UI 的文档][Mint UI] 写的真心不怎么样，这里分享一下 Mint UI 的源码，这里是 [Datetime picker][] 的源码。

![img][img 1]

既然是选择出生日期，那可选日期当然需要做一些限制，粗略地处理为 1900-01-01 ~ 当前时间。注意到文档中的 startDate 和 endDate 可以控制起止时间，但是没有说明如何使用，源码中也没有例子。如果我们直接设置时间格式的字符串，如 `startDate: "1901-01-01"`，这样写是会报错的。

![img][img 2]

根据上图可以看出传入 startDate 的值必须是 Date 类型，所以按下面的写法就可以了：

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

![img][img 3]

<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`。

[![img][img 4]][img_img 4]

// 打开date-pickeropenPicker(picker) { this.$refs[picker].open();},// picker选择的日期改变handleChange(value) { this.birthday = moment(value).format('YYYY-MM-DD');}

#### 2、实现效果 ####

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2k2XFG7r-1593533527832)(http://media.liuxianyu.cn/vue-mintui-datetime-picker-2.gif)\]

#### 3、引入 Moment.js ####

随笔中的代码涉及了 Moment.js，这是一个用来格式化时间的 js 插件，比如下图的时间不便于前端使用，则可以通过 Moment.js 将其转化为 `2018-11-19` 等格式的时间。

[![img][img 5]][img_img 5]

安装方式： `npm i 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:00console.log(now); // 2018-11-19 19:20:06

以上

[img]: https://imgconvert.csdnimg.cn/aHR0cDovL21lZGlhLmxpdXhpYW55dS5jbi92dWUtbWludHVpLWRhdGV0aW1lLXBpY2tlci0xLmdpZg
[Mint UI]: https://mint-ui.github.io/docs/#/zh-cn2/datetime-picker
[Datetime picker]: https://github.com/ElemeFE/mint-ui/blob/master/example/pages/datetime-picker.vue
[img 1]: https://imgconvert.csdnimg.cn/aHR0cDovL21lZGlhLmxpdXhpYW55dS5jbi92dWUtbWludHVpLWRhdGV0aW1lLXBpY2tlci0zLnBuZw?x-oss-process=image/format,png
[img 2]: https://imgconvert.csdnimg.cn/aHR0cDovL21lZGlhLmxpdXhpYW55dS5jbi92dWUtbWludHVpLWRhdGV0aW1lLXBpY2tlci00LnBuZw?x-oss-process=image/format,png
[img 3]: https://imgconvert.csdnimg.cn/aHR0cDovL21lZGlhLmxpdXhpYW55dS5jbi92dWUtbWludHVpLWRhdGV0aW1lLXBpY2tlci01LnBuZw?x-oss-process=image/format,png
[img 4]: https://imgconvert.csdnimg.cn/aHR0cDovL21lZGlhLmxpdXhpYW55dS5jbi92dWUtbWludHVpLWRhdGV0aW1lLXBpY2tlci02LnBuZw?x-oss-process=image/format,png
[img_img 4]: http://media.liuxianyu.cn/vue-mintui-datetime-picker-6.png
[img 5]: https://imgconvert.csdnimg.cn/aHR0cDovL21lZGlhLmxpdXhpYW55dS5jbi92dWUtbWludHVpLWRhdGV0aW1lLXBpY2tlci03LnBuZw?x-oss-process=image/format,png
[img_img 5]: http://media.liuxianyu.cn/vue-mintui-datetime-picker-7.png