disabledDate 日期选择器 datePicker

最新推荐文章于 2023-08-14 13:57:31 发布

MoXinXueWEB

最新推荐文章于 2023-08-14 13:57:31 发布

阅读量512

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/MoXinXueWEB/article/details/125190652

版权

vue 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

单选

<el-date-picker v-model="endDate" :picker-options="endDateOpt"></el-date-picker>

data() {
    return {
        startDate: null,
        endDate: null,
        endDateOpt: {
            disabledData: (time) => {
				// 2021.12.30前不可选
                return time.getTime() < new Date(2021, 11, 30);
            }
        }
    }
}

区间daterange或datetimerange情况

<el-date-picker v-model="value" type="daterange" 
    :picker-options="pickerOptions">
</el-date-picker>

data() {
   return {
     value: '',
     pickerOptions: {
         disabledDate: (time) => {
         	 // 注意是||不是&&
			 // 表示2021.12.11前不可选，2022.5.8后面不可选
             return time.getTime() > new Date(2022, 5, 8) || time.getTime() < new Date(2021, 11, 11);
         }
     }
   };
}

案例

**需求描述：**起止日期，取值范围在3个月内，并且不能选择超过当天的时间
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8Wr7CHNb-1654686674837)(C:\Users\huawei\AppData\Roaming\Typora\typora-user-images\image-20220608184249187.png)]$

实现代码：

<template>
  <div>
    <span>起止日期：</span>
    <el-date-picker v-model="startdate" type="date" placeholder="开始日期" :picker-options="pickerOption0" value-format="yyyyMMdd" format="yyyyMMdd">
    </el-date-picker> -
    <el-date-picker v-model="enddate" type="date" placeholder="结束日期" :picker-options="pickerOption1" value-format="yyyyMMdd" format="yyyyMMdd">
    </el-date-picker>
  </div>
</template>
<script>
export default {
  data() {
    return {
      startdate: '',
      enddate: ''
    }
  },
  computed: {
    pickerOption0() {
      let obj = {}
      obj.disabledDate = time => {
        if (this.enddate != '' && this.enddate != null) {
          let value = this.enddate.replace(/(\d{4})(\d{2})(\d{2})/, "$1-$2-$3");
          let d = new Date(value);
          d.setMonth(d.getMonth() - 3);
          return time.getTime() > new Date(value) || time.getTime() < d;
        } else {
          return time.getTime() > new Date();
        }
      };
      return obj;
    },
    pickerOption1() {
      let obj = {}
      obj.disabledDate = time => {
        if (this.startdate != '' && this.startdate != null) {
          let value = this.startdate.replace(/(\d{4})(\d{2})(\d{2})/, "$1-$2-$3");
          let d = new Date(value);
          d.setMonth(d.getMonth() + 3);
          return time.getTime() > d || time.getTime() > new Date(value);
        } else {
          return time.getTime() > new Date();
        }
      };
      return obj;
    },
  },
}
</script>