一,开始时间选择后结束时间不能选择开始时间之前的时间(两个选择框分离)
// html
<DatePicker
v-model:value="startValue"
:disabledDate="disabledStartDate"
format="YYYY-MM-DD"
@openChange="handleStartOpenChange"
/>
<DatePicker
v-model:value="endValue"
:disabled-date="disabledEndDate"
format="YYYY-MM-DD"
@openChange="handleEndOpenChange"
/>
// JavaScript
import { Moment } from 'moment';
import moment from 'moment';
const startValue = ref<Moment | undefined>();
const endValue = ref<Moment>();
const endOpen = ref<boolean>(false);
const disabledStartDate = (startValue: Moment) => {
if (!startValue || !endValue.value) {
return false;
}
// startTime < endTime 开始时间小于结束时间
return startValue.valueOf() > endValue.value.valueOf();
// startTime <= endTime 开始时间小于等于结束时间
// let strTime = moment(endValue.value._d).format('YYYY-MM-DD HH:mm:ss');
// let date = strTime.split(' ')[0] + ' ' + '23:59:59';
// endValue.value = moment(new Date(date));
// return startValue.valueOf() > endValue.value.valueOf();
};
const disabledEndDate = (endValue: Moment) => {
if (!endValue || !startValue.value) {
return false;
}
return startValue.value.valueOf() > endValue.valueOf();
};
const handleStartOpenChange = (open: boolean) => {
if (!open) {
endOpen.value = true;
}
};
const handleEndOpenChange = (open: boolean) => {
endOpen.value = open;
};
// ant-design封装的日期范围选择组件:
// 先选择开始时间,结束时间可以选择开始时间同一天及之后的时间
// 先选择结束时间,开始时间可以选择结束时间之前的时间,不能选择结束时间当天
//
// 由于时间一直在走,获取到的结束时间当天时间赋给开始时间会大于结束时间,因此不能选择,
// 可以将结束时间调为选择的日期的最后时间(23:59:59),这样开始时间就能选择与结束时间同一天
二,开始时间和结束时间选择完成后判断开始是否大于结束,如果大于互换时间(两个选择框关联)
// element-ui 日期范围选择器
<div class="block">
<span class="demonstration">默认</span>
<el-date-picker
v-model="value1"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</div>
三,结束日期可以等于或小于开始日期(两个选择框关联)
// ant-design
<a-range-picker
:show-time="{ format: 'HH:mm' }"
format="YYYY-MM-DD HH:mm"
:placeholder="['Start Time', 'End Time']"
@change="onRangeChange"
@ok="onRangeOk"
/>
四,禁止选择当前日期之前日期
import moment from 'moment';
disabledDate(current) {
// 禁止选择当前日期之前日期,包含当前日期
return current && current < moment().endOf("day");
// 禁止选择当前日期之前日期,不包含当前日期
// return current && current < moment().startOf("day");
},
五,禁止选择当前日期之后的日期
import moment from 'moment';
disabledDate(current) {
// 禁止选择当前日期之后的日期,包含当前日期
return current && current > moment().endOf("day");
// 禁止选择当前日期之后的日期,不包含当前日期
// return current && current > moment().startOf("day");
},
1 条评论
研究方法科学,数据支撑充分,结论可靠。