基于Vue组件化的日期联动选择器功能的实现代码(2)

默认天数(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组件化的日期联动选择器功能的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章: