ArcoDesign时间组件自定义禁用

场景一：合同日期

合同日期，开始时间任意，结束时间不能小于当日日期

<a-range-picker
  v-model="state.time"
  :style="{ width: '260px' }"
  :disabled-date="disabledDate"
  @select="selectDate"
  @popup-visible-change="onPopupVisibleChange"
/>

const selectDate = (valueString: Date | string | number, value: Date[]) => {
  changeTime(valueString);
  state.dates = value;
};

const onPopupVisibleChange = (visible: boolean) => {
  if (!visible) {
    state.dates = [];
  }
};

const disabledDate = (current: Date) => {
  const { dates } = state;
  if (dates && dates.length === 1) {
    return current && dayjs(current).isBefore(dayjs());
  }
  return false;
};

 

---

场景二：限制选取一个月内的日期

限制选取一个月内，一段时间内或者服务端不支持跨月查表等场景

<a-month-picker
  v-model="state.month"
  style="width: 120px"
  :allow-clear="false"
  @clear="clearMonth"
  @change="clearMonth"
/>
<a-range-picker
  v-model="state.time"
  :default-picker-value="[
    new Date(state.month),
    new Date(state.month),
  ]"
  style="width: 240px"
  value-format="YYYY-MM-DD HH:mm:ss"
  :time-picker-props="{
    defaultValue: ['00:00:00', '23:59:59'],
  }"
  :disabled-date="disabledDate"
  @change="onChangeTime"
/>

const disabledDate = (current: Date) => {
  if (state.month) {
    const monthStart = dayjs(state.month).startOf('month'); // 当前月第一天
    const monthEnd = dayjs(state.month).endOf('month'); // 当前月最后一天
    return monthStart > current || current >= monthEnd;
  }
  return false;
};