Mixins：Element-ui日期时间禁用最强封装 datePicker、datetimePicker。 picker-options=“minxins函数“ 。

ThridTianFuStreet小貂蝉

已于 2024-01-30 11:30:57 修改

阅读量426

点赞数

分类专栏： Vue与ElementUI 文章标签： vue.js javascript 前端 elementui

于 2023-07-24 18:25:13 首次发布

本文链接：https://blog.csdn.net/Blues_han/article/details/131901315

版权

Vue与ElementUI 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Element-ui datePicker与datetimePicker时间禁用,搭配dayjs使用。

适用各种场景。

各种使用场景

	例如：type="date"  type="dateTime" 均可直接使用。
		一：时间段选择：
			A1：只能选择“当前”日期之前(或之后)某一段时间
			A2：任意选择某一段时间
		二：时间点选择：
			B1：只能选择“当前”日期之前(或之后)的时间
			B2：只能选择“自定义的”日期之前(或之后)的时间
		
		*说明：对 type=datetime  的时分秒 未做具体禁用。*

mixins代码块

import dayjs from 'dayjs';
export default {
	data(){
		return{
			todayStart:dayjs().format("YYYY-MM-DD 00:00:00"),
			todayEnd:dayjs().format("YYYY-MM-DD 23:59:59"),
			yesterdayEnd:dayjs().subtract(1,"day").format("YYYY-MM-DD 23:59:59")
		}
	},
	methods:{
		// 超强type="date" type="datetime"禁用函数:  可同天、可今天、需配合下一个方法 endDatePicker 使用
		/* 参数：1：endTime   传入结束时间   
				2：type      1 禁用当前时间之前， 2 禁用当前时间之后， 3 不禁用，可选任意时间段[today参数不起作用]
				3: today:    true/false 是否可选今天（默认可选） */
		startDatePicker(endTime,type,today=true) {
			let endDayEnd = dayjs(endTime).format("YYYY-MM-DD 23:59:59");
			return {
				disabledDate:(time)=> {
					if(type == 1){ // 禁用之前
						if(endTime){
							return time.getTime() > new Date(endDayEnd).getTime() || time.getTime() < new Date(today?this.todayStart:this.todayEnd).getTime();
						}else{
							return time.getTime() < new Date(today?this.todayStart:this.todayEnd).getTime();
						}
					}else if(type==2){ // 禁用之后
						if (endTime) { 
							return time.getTime() > new Date(endDayEnd).getTime() || time.getTime() > new Date(today?this.todayEnd:this.yesterdayEnd).getTime();
						} else {
							return time.getTime() > new Date(today?this.todayEnd:this.yesterdayEnd).getTime();
						}
					}else if(type ==3){ // 不禁用前后选任意时间段
						if (endTime){
							return time.getTime() > new Date(endDayEnd).getTime();
						}
					}
				}
			}
		},
		// 参数：同 startDatePicker 对应传入开始时间 startTime
		endDatePicker(startTime,type,today=true) {
			let startDayStart = dayjs(startTime).format("YYYY-MM-DD 00:00:00");
			return {
				disabledDate:(time)=> {
					if(type == 1){
						if (startTime) { // 禁用之前
							return time.getTime() < new Date(startDayStart).getTime() || time.getTime() < new Date(today?this.todayStart:this.todayEnd).getTime();
						} else {
							return time.getTime() < new Date(today?this.todayStart:this.todayEnd).getTime();
						}
					}else if(type==2){
						if (startTime) {  // 禁用之后
							return time.getTime() < new Date(startDayStart).getTime() || time.getTime() > new Date(today?this.todayEnd:this.yesterdayEnd).getTime();
						} else {
							return time.getTime() > new Date(today?this.todayEnd:this.yesterdayEnd).getTime();
						}
					}else if(type ==3){ // 不禁用前后选任意时间段
						if (startTime){
							return time.getTime() < new Date(startDayStart).getTime();
						}
					}
				}
			}
		},
		// 超强禁用 某个时间 之前||之后
		/* 参数：1：chooseTime   传入某个时间（传null默认今天）   
				2：type      1 禁用传入时间之前， 2 禁用传入时间之后
				3: today:    true/false 是否禁用选择时间 （默认不禁用） */
		chooseDatePicker(chooseTime,type,today=true){
			let chooseDayStart = dayjs(chooseTime).format("YYYY-MM-DD 00:00:00");
			let chooseDayEnd = dayjs(chooseTime).format("YYYY-MM-DD 23:59:59");
			let chooseYesterdayEnd = dayjs(chooseTime).subtract(1,"day").format("YYYY-MM-DD 23:59:59");
			let chooseTomorrowStart = dayjs(chooseTime).add(1,"day").format("YYYY-MM-DD 00:00:00");
			return {
				disabledDate:(time)=>{
					if(type ==1){ // 禁用之前
						if(today){ // 包含今天 || 包含选择时间
							return time.getTime() <  new Date(chooseTime?chooseDayStart:this.todayStart).getTime();
						}else{
							return time.getTime() < new Date(chooseTime?chooseTomorrowStart:this.todayEnd).getTime();
						}
					}else if(type==2){  // 禁用之后
						if(today){ // 包含今天 || 包含选择时间
							return time.getTime() >  new Date(chooseTime?chooseDayEnd:this.todayEnd).getTime();
						}else{
							return time.getTime() >  new Date(chooseTime?chooseYesterdayEnd:this.yesterdayEnd).getTime();
						}
					}
				}
			}
		},
	}
}

具体使用

首先引入注册mixins:
import disabledDate from ‘@/mixins/disabledDate’;
mixins:[disabledDate],
在这里插入图片描述
配置好过后就可以在VUE文件里面直接使用啦！！！！！！！

配置好mixins后日期选择组件的使用

用例一：datePicker（日期禁用）

时间段在两个datePicker开始函数与结束函数配合使用:

	<el-date-picker :picker-options="startDatePicker(endTime,1,true)" 
	 v-model="beginTime" type="date"  
	 value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择开始时间"/> 
       
	<el-date-picker :picker-options="endDatePicker(beginTime,1,true)" 
	 v-model="endTime" type="date"  
	 value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择结束时间"/>

用例二：dateTimePicker （日期时间选择禁用）

时间段在两个datePicker开始函数与结束函数配合使用:

    <el-date-picker
      :picker-options="startDateTimeFull(endTime,2,true)" 
      v-model="startTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"  
      format="yyyy-MM-dd HH:mm:ss" placeholder="选择开始时间"/>    
       
    <el-date-picker :picker-options="endDatePicker(startTime,2,true)" 
      v-model="endTime" type="datetime"  
      value-format="yyyy-MM-dd HH:mm:ss" default-time="23:59:59"
      format="yyyy-MM-dd HH:mm:ss" placeholder="选择结束时间"/>

用例三：HTML组件实例代码（单个时间节点前后前后）

	<el-date-picker :picker-options="chooseDatePicker(chooseTime,1,false)" 
	    v-model="formS.showTime" type="daterange"  
	    value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择时间"/> 
      //注意：chooseTime传 null 则默认今天