選択した日付は別の日付より前(後)です
公式 Web サイトでは、disabled-date を使用して実装されています。日付が無効かどうかを判断するために使用される関数で、Date オブジェクトをパラメーターとして受け取ります。ブール値を返す必要があります。
// 开始日期
<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;
}
};
選択する必要がある日付は 2 つの日付の間です
ビジネス要件により、子コンポーネントによって選択される日付は、次のように親コンポーネントの 2 つの日付の間にある必要があります。
// 在子组件中接收父祖件传来的日期
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;
}
};