码迷,mamicode.com
首页 > 其他好文 > 详细

Element Ui 日期选择器 范围限制 + value-format

时间:2019-11-04 13:39:09      阅读:317      评论:0      收藏:0      [点我收藏+]

标签:moment   return   选择   font   val   disable   time()   判断   后台   

Element Ui 日期选择器 范围限制

一个日期范围

 

// el-date-picker
<el-date-picker
       v-model="value"
       type="date" 
       placeholder="选择日期"
       :picker-options="pickerOptions"> //
</el-date-picker>

    // 选择 今天或以后的日期(不包含今天则去掉下面 - 8.64e7)
    pickerOptions: {
         disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          }
       },  
    // 选择 今天或以前的日期(不包含今天则去掉下面 - 8.64e6)
    pickerOptions: {
         disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6;
          }
       }

 

两个日期范围

 

<el-date-picker
       v-model="value1"
       type="date"
       placeholder="开始日期"
       :picker-options="pickerOptions0">
</el-date-picker>
<el-date-picker
       v-model="value2"
       type="date"
       placeholder="结束日期"
       :picker-options="pickerOptions1">
</el-date-picker>

// 结束日期不能大于开始日期,可以为今天
// 注: 结束时间最大只能为今天,开始时间只能小于或等于结束时间,
// 如果开始时间为今天,结束时间只能为今天
  pickerOptions0: {
     disabledDate: (time) => {
       if (this.value2) {
         return time.getTime() > Date.now() || time.getTime() > this.value2;
       } else {
            return time.getTime() > Date.now();
        }
      }
   },
   pickerOptions1: {
      disabledDate: (time) => {
         return time.getTime() < this.value1 || time.getTime() > Date.now();
      }
   }
  // 在我们项目中用的最多的是这种
  // 结束日期不能大于开始日期,可以为今天
  // 先开始时间,判断为今天或以前,在结束时间,则结束时间大于等于开始时间
  // 先结束时间,判断为今天或以后,在开始时间,则开始时间小于等于结束时间
  pickerOptions0: {
        disabledDate: (time) => {
            if (this.value2) {
              return time.getTime() > this.value2
            } else {
              return time.getTime() > Date.now()
            }
          }
        },
  pickerOptions1: {
        disabledDate: (time) => {
            if (this.value2) {
              return time.getTime() < this.value1
            }
            return time.getTime() < Date.now()
          }
        }

 

value-format

 

value-format属性是改变v-model上值的格式
value-format="yyyy-MM-dd" //2018-12-27
value-format="yyyy-MM-dd HH:mm:ss" //2018-12-27 00:00:00
value-format="timestamp" // 1483326245000
我们最后获取的值都是要传给后台的,所以,我们需要value-format这个属性
假如后台需要的是是 2018-12-27 格式
添加 value-format="yyyy-MM-dd"
会发现验证里加了v-model值的验证都无效了
其实很好解决,判断的依据是13位的时间戳,所以我们需要把验证里的v-model的值替换成13时间戳就可以了.当然你也可以改为 value-format=“timestamp” 也行(这需要考虑之后传值的转换)

在这推荐一个插件 moment,一个操作时间的插件,有兴趣可以去了解一下

 

  

 

Element Ui 日期选择器 范围限制 + value-format

标签:moment   return   选择   font   val   disable   time()   判断   后台   

原文地址:https://www.cnblogs.com/home-/p/11791351.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!