【ElementUI】中日期选择的限制 el-date-picker组件的每项值

最新推荐文章于 2025-09-18 09:39:50 发布

原创最新推荐文章于 2025-09-18 09:39:50 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#日期 #时间范围选择 #日期选择

Vue 同时被 2 个专栏收录

2 篇文章

订阅专栏

element

2 篇文章

订阅专栏

本文详细介绍了 el-date-picker 组件的使用方法，包括对齐方式、日期格式设置、前后端日期格式同步及日期限制等功能。并通过代码示例展示了如何实现日期范围限制，确保结束日期不会小于开始日期。

el-date-picker组件中：

align是对齐方式，有左中右三种，type是日期在前端显示格式，默认为date，可以改为year month week

value-format 是传给后台的日期格式，这里传送什么样的日期格式需要与后台商议，看他们接收什么样的格式

 <el-date-picker
      v-model="value2"
      align="right"
      type="date"
      placeholder="选择日期"
      :picker-options="pickerOptions1"
      value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
  日期限制格式：
<script>
    1.只限制开始时间或者结束时间的
        disabled函数内就是将要被禁用的日期
    data (){ 
       return {
         pickerOptions0: { 
             disabledDate(time) {
                //禁用今天以前的日期，-8.64e7就是是否禁用今天，如果加上就不禁用今天，不加就是禁用
                return time.getTime() < Date.now() - 8.64e7;
             }
         }
         pickerOptions0: { 
             disabledDate(time) {
                //禁用今天（包括今天）以后的日期
                return time.getTime() > Date.now()- 8.64e7;  

                //禁用今天以后的日期
                return time.getTime() > Date.now();   
             }
         }

       }
    }   
</script>

项目中常用的日期日期限制：既要限制日期，又要结束日期不能小于开始时间


 <el-date-picker
    type="date"
    placeholder="开始时间"
    v-model="v1"
    style="width: 100%;" value-format="yyyy-MM-dd"  :picker-options="pickerOptions1">
</el-date-picker>

 <el-date-picker
    type="date"
    placeholder="结束时间"
    v-model="v2"
    style="width: 100%;" value-format="yyyy-MM-dd"  :picker-options="pickerOptions2">
</el-date-picker>

<script>
    //开始时间的限定
     pickerOptions1: {
        disabledDate: (time) => {
            if (v2) { //如果先输入的结束时间，那么开始时间小于结束时间，且不能选今天以前的日期，减号后面意味结束可以与开始是同一天
              return  time.getTime() < Date.now()-8.64e7 ||time.getTime() > new Date(v2).getTime()- 1*24*60*60*1000;
            } else { //如果直接输入开始时间，今天以前的不能选择
              return time.getTime() < Date.now() - 8.64e7
            }
          }
      },
    //结束时间限定
      pickerOptions2: {
            disabledDate: (time) => {
                if (v1) { //如果先输入的开始时间，结束时间不能小于开始时间
                  return time.getTime() < new Date(v1).getTime()- 1*24*60*60*1000;
                }else{
                return time.getTime() < Date.now()
              }
      },
    //人为限制一组时间
    pickerOptions3: { //禁用20-28号的日期
        let array = '2019-11-20'
        let pro = '2019-11-28'
       disabledDate: (time) => {
         return  new Date(array).getTime()-8.64e7 < time.getTime() && time.getTime()< new Date(pro).getTime();
                
       },

</script>

禁用后台传递的一组日期和今天以前的日期

 <el-date-picker v-model="useDate" type="daterange" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期"  value-format="yyyy-MM-dd" :picker-options="{disabledDate: (time) => {return dealDisabledDate(time,PlanDateBetween);}}" style="width:83%"></el-date-picker>

//这里的json就是后台返回的要禁用的一组或者几组日期，以数组对象的形式返回
 dealDisabledDate(time,json){
      let vm =this
      let tempArr = [];
      let flag = (time.getTime() < Date.now() - 8.64e7);
      tempArr=json?json:[];//{startDate: "2019-12-26",endDate: "2019-12-28"}            
       const date = moment(time).format('YYYY-MM-DD');//这里引用了一个moment组件
       tempArr.forEach(function(item){
         flag=flag||(date >= item.startDate&&date <= item.endDate)
       });
       return flag;
    },