我们社区的前端项目使用元素组件库，后端管理系统使用iview。组件库都很优秀，但是日期和时间选择器没有那种“年-月-日”联动选择组件。虽然两个组件库给出的相关组件也很好，但有时候也不是很好用，很难理解为什么很多组件库会放弃日期联动选择。所以考虑自己做一个。

将时间戳转换为日期格式

//时间戳是时间戳new Date(时间戳)//获取时间标记对象，例如：sun sep 02 2018 00:00336000 GMT 0800(中国标准时间)/*采集年份：new Date(时间戳)。获取月份：新日期(时间戳)。getMonth () 1获取日期：新日期(时间戳)。获取星期几：新日期(时间戳)。getDay() */将日期格式(yyyy-mm-dd)转换为时间戳

//三种形式下的兼容性问题：newdate ('2018-9-2 ')。gettime () newdate ('2018-9-2 ')。valueof()日期。解析(new date(' 2018-9-2 ')ie

注意：以上代码无法得到IE10下的标准时间值(至少包括IE10)，因为2018-9-2不是标准日期格式(标准是2018-09-02)，至少chrome内核为我们做了容错(估计Firefox也兼容)。所以一定要做严格的日期字符串集成操作，不能偷懒

基于Vue组件化的日期在线选择器

此日期选择组件的用途如下：

(1)无论当前填写的日期是完整的还是默认的，都必须将值传递给父组件('默认')，因为父组件要根据得到的日期值做相关处理(如限制提交等)。);(2)具体天数要自适应，即大月31天，小月30天，平年2月28天，闰年29天；(3)如果天数为第31天(或第30天)，则为月数，如果当前选择的月数不包括选择的天数，则天数将被清除；(4)如果父组件有时间戳传入，将显示时间供组件修改。

实现代码(基于Vue元素组件库)

模板div class=' date-pickers ' El-select class=' year select ' v-model='当前日期。年份' @ change=' judicateday '占位符='年El-option v-for=' item in years ' : key=' item ' : label=' item ' : value=' item '/El-option/El-select El-select class=' month select ' v-model='当前日期。月' @ change=' judge day '占位符='月El-option v-for=' item in months ' :键=' item ' :标签=' String(item)' .长度==1?字符串(' 0 ' item): string(item)' : value=' item '/El-option/El-select El-select class=' day select ' : class=' { ' error ' : has error } ' v-model=' current date '。'日'占位符='日El-option v-for='天数中的项目' : key='项目' : label=' String(项目).长度==1?String(' 0 ' item): String(item)' : value=' item '/El-option/El-select/div/template script导出默认值{ prop : { source Date : { type :[String，Number] } }，name: 'date-pickers '，data(){ return { current Date : { year 33: ' '，month 33333: ' ' }，day: ' ' }，maxyears}，watch : { source date(){ if(this。来源日期){这。当前日期=这个。时间戳时间(这个。来源日期)；} }，normalMaxDays(){ this。get full days()；如果(这个。当前日期。今年。当前日期。今天。normalmaxdays){ this。当前日期。day=} }，当前日期： {处理程序(新值，旧值){ this。judicate day()；if(新值。新年价值。月份新值。天){这个。haserror=false} else { this.hasError=true} this。emit date()；}，deep: true } }，创建了(){ this。getfullyears()；这个。get full days()；}，方法： { emitDate(){ let timestamp；//暂默认传给父组件时间戳形式如果(这个。当前日期。今年。当前日期。这个月。当前日期。day){ 0让month=this.currentDate.month 10？(“0”这个。当前日期。月):这个。当前日期。月份；让day=this.currentDate.day 10？(“0”这个。当前日期。天):这个。当前日期。一天；让DateStr=这个。当前日期。“年”“月”“日”；时间戳=新日期getTime()；} else { timestamp=}这个$emit('dateSelected '，时间戳);}，timestampToTime(时间戳){ let DateObject={ }；如果(时间戳的类型=='number') { dateObject.year=新日期（时间戳)。getFullYear()；月=新日期（时间戳)。getMonth()1；dateObject.day=新日期（时间戳)。getDate()；返回dateObject} }，getFullYears() { for(让我=this . minyear I=this . Maxyear I){ this。几年了。推(我)；} }，getFullDays(){ this。天数=[]；用于(设I=1；i=this.normalMaxDaysI){ this。几天。推(我)；} }，judgeDay() { if ([4，6，9，11]).indexOf(this.currentDate.month)！==-1){这个。normalmaxdays=30//小月30天如果(这个。当前日期。今天。当前日期。day==31){ this。当前日期。day=} } else if(this。当前日期。month==2){ if(this。当前日期。年份){ if((this。当前日期。今年% 4==0。当前日期。年份百分百！=0)| |这个。当前日期。year % 400==0){ this。normalmaxdays=29//闰年2月29天} else { this.normalMaxDays=28//闰年平年28天} } else { this.normalMaxDays=28//闰年平年28天} } else { this.normalMaxDays=31//大月31天} } }};/scriptstyle lang='less ' .日期选取器{。选择{ margin-right : 10px；宽度： 80px文本对齐：中心；} .年{ width: 100px}。错误{。El-input _ _内部{边框： 1px实心# f 1403 c；边界半径： 4px} } }/样式代码解析

默认天数（正常最大天数)为31天，最小年份1910,最大年份为当前年（因为我的业务场景是填写生日，大家这些都可以自己调)并在创造钩子中先初始化年份和天数。

监听当前日期（当前日期)

核心是监听每一次日期的改变，并修正正常最大天数，这里对当前日期进行深监听，同时发送到父组件，监听过程：

观察： {当前日期： {处理程序(新值，旧值){这。judicate day()；//更新当前天数这个。emit date()；//发送结果至父组件或其他地方}，deep: true } }判断依据方法：

judgeDay() { if ([4，6，9，11]).indexOf(this.currentDate.month)！==-1){这个。normalmaxdays=30//小月30天如果(这个。当前日期。今天。当前日期。day==31){ this。当前日期。day=} } else if(this。当前日期。month==2){ if(this。当前日期。年份){ if((this。当前日期。今年% 4==0。当前日期。年份百分百！=0)| |这个。当前日期。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天}}最开始的时候我用的包含判断当前月是否是小月：

if([4，6，9，11]).包括(this.currentDate.month))

也是缺乏经验，最后测出来包含在IE10不支持，因此改用普通的indexOf()。

emitDate:emitDate(){ let timestamp；//暂默认传给父组件时间戳形式如果(这个。当前日期。今年。当前日期。这个月。当前日期。day){ 0让month=this.currentDate.month 10？(“0”这个。当前日期。月):这个。当前日期。月份；让day=this.currentDate.day 10？(“0”这个。当前日期。天):这个。当前日期。一天；让DateStr=这个。当前日期。“年”“月”“日”；时间戳=新日期getTime()；} else { timestamp=}这个$emit('dateSelected '，时间戳);//发送给父组件相关结果},这里需要注意的，最开始并没有做上述标准日期格式处理，因为铬做了适当容错，但是在IE10就不行了，所以最好要做这种处理。

正常最大天数改变后必须重新获取天数，并依情况清空当前选择天数：

观看： { NormaxDays(){ this。get full days()；如果(这个。当前日期。今年。当前日期。今天。normalmaxdays){ this。当前日期。day=} }}最终效果

总结

以上所述是小编给大家介绍的基于某视频剪辑软件组件化的日期联动选择器功能的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！