一,开始时间选择后结束时间不能选择开始时间之前的时间(两个选择框分离)

// 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");
},
最后修改:2023 年 11 月 18 日
如果觉得我的文章对你有用,请随意赞赏