el-date-picker 禁用开始日期之前和结束日期之后

最新推荐文章于 2024-07-08 11:23:53 发布

雨沫相与

最新推荐文章于 2024-07-08 11:23:53 发布

阅读量371

点赞数 2

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/u011933026/article/details/139374594

版权

el-date-picker 默认显示弹出的日历，并根据得到的开始时间和结束时间，禁用开始时间之前的日期，禁用结束时间之后的日期

里面用到dayjs插件处理时间数据

<el-date-picker
				class="pickerCuster"
				   v-model="checkDate"
				   type="date"
				   size="small"
				   ref="datePick"
				   value-format="yyyy-MM-dd"
				   format="yyyy-MM-dd"
				   :clearable="false"
				   @change="calCellClick"
				   @blur="calCellClick"
				   :placeholder="'选择日期'"
				   :picker-options="pickerOptions"
				></el-date-picker>


export default {
  data() {
    return {
		beginTime:'',//日历开始时间
		endTime:'',//日历结束时间
     
    };
  },
 
	computed: {
	  pickerOptions() {
	        const _this = this
	        return {
	          disabledDate: (time) => {
                    //dayjs(‘2024-06-01’).valueOf() 换成字符串格式的时间
	          		const beginDate =dayjs(_this.beginTime).valueOf(); // 需要禁用之前日期的字符串日期值
	          		const endDate = dayjs(_this.endTime).valueOf(); // 需要禁用之后日期的字符串日期值
	          		time = dayjs(time).format('YYYY-MM-DD')
	          		time=dayjs(time).valueOf(); 
	          		return time < beginDate || // 禁用指定日期之前的所有日期
	          		time > endDate; // 禁用指定日期之后的所有日期
	              }
	        }
	      },

	},

	
  created() {
	
	setTimeout(() => {
	   this.checkDate = this.beginTime
	   console.log("初始化日期", this.checkDate);
	}, 500);
	
  },
  mounted() {
	  this.$refs.datePick.focus(); // 让日历组件默认触发焦点事件
	  
  },

  methods: {
	
	//日历点击事件
	calCellClick(date){
		this.$refs.datePick.focus(); // 选择日期后依旧触发焦点
	
	},


	
  }
};