ant-design-vue3 a-range-picker 设置只能先选择开始日期

442 阅读1分钟

a-range-picker 需要限制开始日期不能选择未来的日期,但是如果用户还可以先选结束日期的话就很难控制。刚开始想通过open的回调获取当前选择的是开始日期还是结束日期,很难受官方并没有提供该参数。发现通过修改一些css的样式就可以达到每次都是先选择开始日期的目的。 代码如下:

<a-range-picker
  style="width: 100%"
  class="my-picker"
  inputReadOnly
  valueFormat="YYYY-MM-DD HH:mm:ss"
  format="YYYY-MM-DD HH:mm:ss"
  :value="hackValue || ruleForm.selfEventTime"
  :disabled-date="disabledDate"
  @change="rangePickerChange"
  @openChange="onOpenChange"
  @calendarChange="onCalendarChange"
/>

关键代码,利用伪元素做个遮罩即可,但是伪元素的宽度要稍短一些,要不会遮盖到删除按钮。

.my-picker {
  position: relative;
  &::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: calc(100% - 25px);
    height: 100%;
    z-index: 9;
  }
}