Web前端之Vue+Element的时间选择组件的禁止选择以前或以后的时间、获取当前时间、getTime、Date、now

Html

<el-date-picker v-model="before" value-format="yyyy-MM-dd" :picker-options="beforeDate" clearable
type="date" placeholder="选择日期" style='width:0.8rem'></el-date-picker>

<el-date-picker v-model="afterwards" value-format="yyyy-MM-dd" :picker-options="afterwardsDate" clearable
type="date" placeholder="选择日期" style='width:0.8rem'></el-date-picker>

JavaScript

export default {
	data() {
		return {
			before: "",
			afterwards: "",
			beforeDate: {
				disabledDate(time) {
					// 禁止选择以前的时间
					return time.getTime() < Date.now(); 
				},
			},
			afterwards: {
				disabledDate(time) {
					// 禁止选择以后的时间
					return time.getTime() > Date.now(); 
				},
			},
		}
	}
}

解析

代码段使用Vue框架和Element组件库编写，用于创建两个日期选择器。Element是一个基于Vue的桌面端组件库，它提供了一套完整的组件来帮助开发者快速构建Web界面。

---

1、<el-date-picker>是Element中的日期选择器组件，用于让用户选择日期。
2、v-model="before"和v-model="afterwards"是Vue的双向数据绑定语法，它们将日期选择器的值绑定到Vue实例的data属性中的before和afterwards变量上。
3、value-format="yyyy-MM-dd"指定了日期格式为年-月-日。
4、:picker-options="beforeDate"和:picker-options="afterwardsDate"是将beforeDate和afterwardsDate对象作为配置传递给日期选择器，用于自定义日期选择器的行为。
5、clearable属性允许用户清除已选择的日期。
6、type="date"指定日期选择器的类型为日期选择。
7、placeholder="选择日期"是当日期选择器没有选择日期时显示的提示文字。
8、style='width:0.8rem'设置了日期选择器的宽度。

---

在Vue实例的data函数中，定义before和afterwards变量，它们初始为空字符串，表示日期选择器初始没有选择任何日期。
beforeDate和afterwardsDate对象定义disabledDate函数，用于禁用特定的日期。

---

1、beforeDate对象中的disabledDate函数禁止用户选择当前时间以前的日期。它通过比较时间对象time的毫秒值与Date.now()(当前时间的毫秒值)来实现。
2、afterwardsDate对象中的disabledDate函数禁止用户选择当前时间以后的日期。它同样通过比较时间对象time的毫秒值与Date.now()来实现。