Use the Element Plus date component to require the selected date to be before (after) another date or between two dates

The selected date is before (after) another date

Implemented by using disabled-date, the official website explains: a function used to determine whether the date is disabled, accepting a Date object as a parameter. Should return a Boolean value.

// 开始日期
<el-form-item label="开始日期" prop="dateId">
	<el-date-picker
		type="date"
		format="YYYY-MM-DD"
		value-format="YYYY-MM-DD"
		v-model="ruleForm.dateId"
		clearable
		placeholder="开始日期"
		:disabled="disabledFlag"
		:disabled-date="dateId"
		>
		</el-date-picker>
	</el-form-item>
	// 结束日期
	<el-form-item label="结束日期" prop="endDate">
		<el-date-picker
			type="date"
			format="YYYY-MM-DD"
			value-format="YYYY-MM-DD"
			v-model="ruleForm.endDate"
			clearable
			placeholder="结束日期"
			:disabled="disabledFlag"
			:disabled-date="endDate"
		>
		</el-date-picker>
	</el-form-item>
// 如果结束日期存在，就返回结束日期之前的日期，否则不限则开始日期的选择
const dateId = (time: Date) => {
	if (state.ruleForm.endDate) {
		return time.getTime() > new Date(state.ruleForm.endDate).getTime();
		} else {
			return false;
		}
	};
	// 同理，如果开始日期存在，就返回开始日期之前的日期，否则不限则结束日期的选择
const endDate = (time: Date) => {
	if (state.ruleForm.dateId) {
			return time.getTime() < new Date(state.ruleForm.dateId).getTime();
		} else {
			return false;
		}
	};

The date required to be selected is between two dates

Due to business requirements, the date selected by the child component should be between the two dates of the parent component, as follows:

// 在子组件中接收父祖件传来的日期
startDate: {
	type: String,
	default: '',
	require: true,
},
endDate: {
	type: String,
	default: '',
	require: true,
},
// 选择的值班日期要在开始日期和结束日期之间!
<el-date-picker
	type="date"
	clearable
	:editable="false"
	placeholder="请选择值班日期"
	format="YYYY-MM-DD"
	v-model="scope.row.dateId"
	@change="setDateId(scope.row.dateId, scope.row)"
	>
	</el-date-picker>
// 通过 change 事件实现
const setDateId = (value: Date, row: { [key: string]: any }) => {
	let startDate = new Date(props.startDate).getTime();
	let endDate = new Date(props.endDate).getTime();
	let data = new Date(value).getTime();
	if (!startDate || !endDate) {
		row.dateId = '';
		return ElMessage.error('请先选择开始日期和结束日期!');
	} else if (data < startDate || data > endDate) {
		row.dateId = '';
		return ElMessage.error('选择的值班日期要在开始日期和结束日期之间!');
	} else {
		return true;
	}
};