vue element-ui date-picker 日期选择器控件 设置时间范围 限制可选的开始时间和结束时间

vue element-ui date-picker 日期选择器控件  设置时间范围  限制可选的开始时间和结束时间

总结一下日期控件实现开始日期、结束日期的选择范围限制,以便更符合实际情况。

vue element-ui date-picker 日期选择器控件 设置时间范围 限制可选的开始时间和结束时间_第1张图片

需求:

1. 开始日期和结束日期都必须是今天之前;

2. 先选择开始日期,那么结束日期必须在开始日期之后,即只能选择开始日期之后的日期;

3. 先选择结束日期,那么开始日期必须在结束日期之前,即只能选择结束日期之前的日期;

三个条件是【且】的关系。

实现效果:

vue element-ui date-picker 日期选择器控件 设置时间范围 限制可选的开始时间和结束时间_第2张图片

( 注:小编操作和写文日期5月27日)

 

实现代码:

vue  template 代码:


        
            
        
            

script 代码

//时间限制,符合日期先后顺序的实际情况
      pickerOptionsStart: {
        disabledDate: time => {
          if (this.addDrillRecordRow.endTime) {
            return (
              time.getTime() > Date.now() - 8.64e6 ||
              time.getTime() > this.addDrillRecordRow.endTime  /*开始日期要在选择的结束日期之前*/
            );
          }
          // return time.getTime() < Date.now() - 8.64e7; /*今天及以后*/
          return time.getTime() > Date.now() - 8.64e6; /*今天及之前,注意数字不一样*/
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          if (this.addDrillRecordRow.startTime) {
            return (
              time.getTime() > Date.now() - 8.64e6 ||
              time.getTime() < this.addDrillRecordRow.startTime /*结束日期要在选择的开始日期之后*/
            );
          }
          return time.getTime() > Date.now() - 8.64e6; /*今天及之前*/
        }
      }

注:这里的addDrillRecordRow是表单数据的绑定对象。

 

总结:

1. 这里实现了日期控件的选择范围限制,时间选择器和日期时间选择器应该也可以类似实现。

2. 类似这种日期选择的功能,在前端做限制处理是比较好的,优化了用户体验,如果放在后台进行验证,可能更加复杂。

 

还可以参考下面两篇文章:

https://blog.csdn.net/weixin_43565820/article/details/89883512

https://www.jianshu.com/p/1804ac782e14

 

有问题欢迎来微信找我!一起学习成长,交个朋友!^_^

微信搜索:acoolgiser,或者直接扫描

vue element-ui date-picker 日期选择器控件 设置时间范围 限制可选的开始时间和结束时间_第3张图片

 

 

你可能感兴趣的:(element,vue.js,date-picker,vue,element-ui,日期选择器控件,设置时间范围,限制开始结束时间)