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;
}
}