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


Posted in Javascript onNovember 30, 2018

我们的社区前端工程用的是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组件化的日期联动选择器功能的实现代码

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

总结

以上所述是小编给大家介绍的基于Vue组件化的日期联动选择器功能的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JScript中的&quot;this&quot;关键字使用方式补充材料
Mar 08 Javascript
一个JQuery操作Table的代码分享
Mar 30 Javascript
jQuery 全选/反选以及单击行改变背景色实例
Jul 02 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
Jun 23 Javascript
jQuery中ajax的post()方法用法实例
Dec 26 Javascript
javascript实现简单的全选和反选功能
Jan 05 Javascript
JavaScript中关联原型链属性特性
Feb 13 Javascript
javascript学习之json入门
Dec 22 Javascript
vue-router相关基础知识及工作原理
Mar 16 Javascript
JS实现使用POST方式发送请求
Aug 30 Javascript
JS实现随机抽选获奖者
Nov 07 Javascript
JavaScript接口实现方法实例分析
May 16 Javascript
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 #Javascript
JS实现图片拖拽交换效果
Nov 30 #Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 #Javascript
jQuery实现网页拼图游戏
Apr 22 #jQuery
vue 双向数据绑定的实现学习之监听器的实现方法
Nov 30 #Javascript
基于jquery实现九宫格拼图小游戏
Nov 30 #jQuery
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 #Javascript
You might like
全国FM电台频率大全 - 18 湖南省
2020/03/11 无线电
php用户注册页面利用js进行表单验证具体实例
2013/10/17 PHP
YII中assets的使用示例
2014/07/31 PHP
php中静态类与静态变量用法的区别分析
2015/01/15 PHP
PHP使用缓存即时输出内容(output buffering)的方法
2015/08/03 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
项目实践之javascript技巧
2007/12/06 Javascript
JavaScript 学习小结(适合新手参考)
2009/07/30 Javascript
javascript iframe编程相关代码
2009/12/28 Javascript
javascript中typeof的使用示例
2013/12/19 Javascript
Javascript闭包实例详解
2015/11/29 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
2015/12/18 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
jQuery Pagination分页插件使用方法详解
2017/02/28 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
js实现会跳动的日历效果(完整实例)
2017/10/18 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
面包屑导航详解
2017/12/07 Javascript
微信小程序定位当前城市的方法
2018/07/19 Javascript
详解elementUI中input框无法输入的问题
2020/04/27 Javascript
python里大整数相乘相关技巧指南
2014/09/12 Python
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
python利用插值法对折线进行平滑曲线处理
2018/12/25 Python
anaconda如何查看并管理python环境
2019/07/05 Python
简单了解python代码优化小技巧
2019/07/08 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
简单介绍Object类的功能、常用方法
2013/10/02 面试题
促销活动策划方案
2014/01/12 职场文书
仓库组长岗位职责
2014/01/29 职场文书
机关单位动员会主持词
2014/03/20 职场文书
文科毕业生自荐书范文
2014/04/17 职场文书
关于奉献的演讲稿
2014/05/21 职场文书
乡镇党建工作汇报材料
2014/08/14 职场文书
党员剖析材料范文
2014/09/30 职场文书
2015年秋季校长开学典礼致辞
2015/07/29 职场文书
docker compose 部署 golang 的 Athens 私有代理问题
2022/04/28 Servers