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

我们的社区前端工程用的是element组件库，后台管理系统用的是iview，组件库都很棒，但是日期、时间选择器没有那种“ 年份 - 月份 -天数 ” 联动选择的组件。虽然两个组件库给出的相关组件也很棒，但是有时候确实不是太好用，不太明白为什么很多组件库都抛弃了日期联动选择。因此考虑自己动手做一个。

将时间戳转换成日期格式

// 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组件库)

 

<template>
 <div class="date-pickers">
  <el-select 
  class="year select"
  v-model="currentdate.year"
  @change='judgeday'
  placeholder="年">
   <el-option
   v-for="item in years"
   :key="item"
   :label="item"
   :value="item">
   </el-option>
  </el-select>
  <el-select 
  class="month select"
  v-model="currentdate.month" 
  @change='judgeday'
  placeholder="月">
   <el-option
   v-for="item in months"
   :key="item"
   :label="string(item).length==1?string('0'+item):string(item)"
   :value="item">
   </el-option>
  </el-select>
  <el-select 
  class="day select"
  :class="{'error':haserror}"
  v-model="currentdate.day" 
  placeholder="日">
   <el-option
   v-for="item in days"
   :key="item"
   :label="string(item).length==1?string('0'+item):string(item)"
   :value="item">
   </el-option>
  </el-select>
 </div>
</template>
<script>
export default {
 props: {
 sourcedate: {
  type: [string, number]
 }
 },
 name: "date-pickers",
 data() {
 return {
  currentdate: {
  year: "",
  month: "",
  day: ""
  },
  maxyear: new date().getfullyear(),
  minyear: 1910,
  years: [],
  months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
  normalmaxdays: 31,
  days: [],
  haserror: false
 };
 },
 watch: {
 sourcedate() {
  if (this.sourcedate) {
  this.currentdate = this.timestamptotime(this.sourcedate);
  }
 },
 normalmaxdays() {
  this.getfulldays();
  if (this.currentdate.year && this.currentdate.day > this.normalmaxdays) {
  this.currentdate.day = "";
  }
 },
 currentdate: {
  handler(newvalue, oldvalue) {
  this.judgeday();
  if (newvalue.year && newvalue.month && newvalue.day) {
   this.haserror = false;
  } else {
   this.haserror = true;
  }
  this.emitdate();
  },
  deep: true
 }
 },
 created() {
 this.getfullyears();
 this.getfulldays();
 },
 methods: {
 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);
 },
 timestamptotime(timestamp) {
  let dateobject = {};
  if (typeof timestamp == "number") {
  dateobject.year = new date(timestamp).getfullyear();
  dateobject.month = new date(timestamp).getmonth() + 1;
  dateobject.day = new date(timestamp).getdate();
  return dateobject;
  }
 },
 getfullyears() {
  for (let i = this.minyear; i <= this.maxyear; i++) {
  this.years.push(i);
  }
 },
 getfulldays() {
  this.days = [];
  for (let i = 1; i <= this.normalmaxdays; i++) {
  this.days.push(i);
  }
 },
 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; //闰年平年28天
   }
  } 
  else {
   this.normalmaxdays = 28;//闰年平年28天
  }
  } 
  else {
  this.normalmaxdays = 31;//大月31天
  }
 }
 }
};
</script>
<style lang="less">
.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;
 }
 }
}
</style>

代码解析

默认天数(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组件化的日期联动选择器功能的实现代码，希望对大家有所帮助