这篇文章主要介绍了如何实现Vue组件化的日期联动选择器功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
公司主营业务：成都做网站、成都网站制作、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。成都创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联公司推出青羊免费做网站回馈大家。
将时间戳转换成日期格式
// timestamp 为时间戳
new Date(timestamp)
//获取到时间标砖对象，如：Sun Sep 02 2018 00:00:00 GMT+0800 (中国标准时间)
/*
获取年： new Date(timestamp).getFullYear()
获取月： new Date(timestamp).getMonth() + 1
获取日： new Date(timestamp).getDate()
获取星期几： new Date(timestamp).getDay()
*/
将日期格式(yyyy-mm-dd)转换成时间戳
//三种形式
new Date('2018-9-2').getTime()
new Date('2018-9-2').valueOf()
Date.parse(new Date('2018-9-2'))IE下的兼容问题
注意： 上述代码在IE10下(至少包括IE10)是没法或得到标准时间value的，因为 2018-9-2 并不是标准的日期格式(标准的是 2018-09-02)，而至少 chrome 内核为我们做了容错处理(估计火狐也兼容)。因此，必须得做严格的日期字符串整合操作，万不可偷懒
基于Vue组件化的日期联机选择器
该日期选择组件要达到的目的如下：
(1) 当前填入的日期不论完整或缺省，都要向父组件传值（缺省传''），因为父组件要根据获取的日期值做相关处理（如限制提交等操作等）；
(2) 具体天数要做自适应，即大月31天、小月30天、2月平年28天、闰年29天；
(3) 如先选择天数为31号(或30号)，再选择月数，如当前选择月数不含已选天数，则清空天数；
(4) 如父组件有时间戳传入，则要将时间显示出来供组件修改。
实现代码(使用的是基于Vue + element组件库)
.date-pickers {
.select {
margin-right: 10px;
width: 80px;
text-align: center;
}
.year {
width: 100px;
}
.error {
.el-input__inner {
border: 1px solid #f1403c;
border-radius: 4px;
}
}
}
代码解析
默认天数(normalMaxDays)为31天，最小年份1910，最大年份为当前年（因为我的业务场景是填写生日，大家这些都可以自己调）并在created 钩子中先初始化年份和天数。
监听当前日期(currentDate)
核心是监听每一次日期的改变，并修正normalMaxDays，这里对currentDate进行深监听，同时发送到父组件,监听过程:
watch: {
currentDate: {
handler(newValue, oldValue) {
this.judgeDay(); //更新当前天数
this.emitDate(); //发送结果至父组件或其他地方
},
deep: true
}
}judgeDay方法：
judgeDay() {
if ([4, 6, 9, 11].indexOf(this.currentDate.month) !== -1) {
this.normalMaxDays = 30; //小月30天
if (this.currentDate.day && this.currentDate.day == 31) {
this.currentDate.day = "";
}
} else if (this.currentDate.month == 2) {
if (this.currentDate.year) {
if (
(this.currentDate.year % 4 == 0 &&
this.currentDate.year % 100 != 0) ||
this.currentDate.year % 400 == 0
) {
this.normalMaxDays = 29; //闰年2月29天
} else {
this.normalMaxDays = 28; //平年2月28天
}
} else {
this.normalMaxDays = 28; //平年2月28天
}
} else {
this.normalMaxDays = 31; //大月31天
}
}最开始的时候我用的 includes判断当前月是否是小月：
if([4, 6, 9, 11].includes(this.currentDate.month))
也是缺乏经验，最后测出来includes 在IE10不支持，因此改用普通的indexOf()。
emitDate：
emitDate() {
let timestamp; //暂默认传给父组件时间戳形式
if ( this.currentDate.year && this.currentDate.month && this.currentDate.day) {
let month = this.currentDate.month < 10 ? ('0'+ this.currentDate.month):this.currentDate.month;
let day = this.currentDate.day < 10 ? ('0'+ this.currentDate.day):this.currentDate.day;
let dateStr = this.currentDate.year + "-" + month + "-" + day;
timestamp = new Date(dateStr).getTime();
}
else {
timestamp = "";
}
this.$emit("dateSelected", timestamp);//发送给父组件相关结果
},这里需要注意的，最开始并没有做上述标准日期格式处理，因为chrome做了适当容错，但是在IE10就不行了，所以最好要做这种处理。
normalMaxDays改变后必须重新获取天数，并依情况清空当前选择天数：
watch: {
normalMaxDays() {
this.getFullDays();
if (this.currentDate.year && this.currentDate.day > this.normalMaxDays) {
this.currentDate.day = "";
}
}
}最终效果
感谢你能够认真阅读完这篇文章，希望小编分享的“如何实现Vue组件化的日期联动选择器功能”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!
网站栏目：如何实现Vue组件化的日期联动选择器功能
当前URL：http://chengdu.cdxwcx.cn/article/gjijgo.html
