前言

最近的一个项目，要求能够通过日期选择器限制以下这些日期不能选择

– 昨天至以前不能选择

– 某月某日之后不能选择

– 遇到周末不能选择

– 节假日不能选择

那么，为了实现这个效果我也是费了一些功夫，话不多说，接下来看看是怎么实现它的吧

实现

– 在页面添加日期选择器控件

<template>
    <el-date-picker
      v-model="value1"
      type="datetime"
      placeholder="选择日期时间">
      :picker-options="{ disabledDate }"
    </el-date-picker>
</template>
<script>
	export default {
		name: "xxx",
		data() {
			value1: null, // 接收选择的日期
		}
	}
</script>

关键点在于picker-options，等于我们写的方法（不知道为什么，还必须得是这个方法名才能够生效）

ps 有一个需要注意的是如果你需要用到节假日不能被选择，那么定义接收选择的日期的变量
应该设置为null，因为节假日可能不是周末，当设置new Date()的时候，到节假日那天依然
是被选中的状态

– 定义方法

前三个的实现相对简单，直接就能够使用
那么先实现前三个限制选择

<template>
    <el-date-picker
      v-model="value1"
      type="datetime"
      placeholder="选择日期时间">
      :picker-options="{ disabledDate }"
    </el-date-picker>
</template>
<script>
	export default {
		name: "xxx",
		data() {
			value1: null, // 接收选择的日期
			finishTime: "2022-08-31 00:00:00", // 限制到某月某日以后不能被选择
		},
		methods: {
		// 定义限制的方法
		disabledDate (time) {
		// 设置不能选择今天之前的时间
      	let beforeTime = new Date();
      	beforeTime.setTime(beforeTime.getTime() - 24 * 60 * 60 * 1000);
      	// 设置不能选择结束的时间,并把字符串转日期
      	let finishTime = Date.parse(this.finishTime.replace(/-/g, "-"));
		}
		return (
        time.getTime() < beforeTime ||
        time.getTime() > finishTime ||
        time.getDay() == 6 ||
        time.getDay() == 0 ||
      );
		},
	}
</script>

ps 在结束的时间，你可以自定义，也可以是后端传的值，
然后是time.getDay(),等于6为周末，等于0为周日

可以看到，变成灰色的部分不能被选择
今天为2022-07-07,之前的时间是不能被选择的

– 设置特定时间不能被选择

这个的话，就需要你能够获取到具体的时间节点了，格式为yyyy-mm-dd
如 2022-07-07
在我目前所在的公司，是有专门获取节假日的接口，返回的数据为这样

以上为周末加节假日的时间
另外，由于，我前端已经对周末处理了，所以我后端排除掉周末，只留下节日给前端
为演示方便，我将后端写死两条假的节日数据给前端
2022-07-14
2022-07-15

于是代码为这样

<template>
    <el-date-picker
      v-model="value1"
      type="datetime"
      placeholder="选择日期时间">
      :picker-options="{ disabledDate }"
    </el-date-picker>
</template>
<script>
	export default {
		name: "xxx",
		data() {
			value1: null, // 接收选择的日期
			finishTime: "2022-08-31 00:00:00", // 限制到某月某日以后不能被选择
			holidays: ["2022-07-15","2022-07-15"], // 后端返回数据
		},
		methods: {
		// 定义限制的方法
		disabledDate (time) {
		// 设置不能选择今天之前的时间
      	let beforeTime = new Date();
      	beforeTime.setTime(beforeTime.getTime() - 24 * 60 * 60 * 1000);
      	// 设置不能选择结束的时间,并把字符串转日期
      	let finishTime = Date.parse(this.finishTime.replace(/-/g, "-"));
		}
		return (
        time.getTime() < beforeTime ||
        time.getTime() > finishTime ||
        time.getDay() == 6 ||
        time.getDay() == 0 ||
        holidays.indexOf(this.setyyyyMMdd(time.getTime()).slice(0, 10)) != -1
      );
		},
		    // 设置时间格式为yyyy-mm-dd方法
    setyyyyMMdd(shijian) {
      let date = new Date(shijian);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var minute = date.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      var second = date.getSeconds();
      second = second < 10 ? "0" + second : second;
      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
    	},
	}
</script>

ps 需要注意的是，在elemtui，这个方法的time实际上是一个数组,因此，我们判断它内部方法遍历的时间在不在
我们的节假日数组里，在的话使用indexOf()方法
indexOf()比较的是字符，所以需要转为字符进行比较

注意14和15，现在他们也被禁止选择了

结语

以上为elemetUI限制特定日期不能选择的实现过程