「这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」
前言
目前公司的大部分项目都用的vue，ui框架用的ant design，今天接到需求要给日期选择器加上一些限制，我们的业务逻辑是有开始时间和结束时间，并且是开始时间和结束时间是两个选择框，在这里我们选择了使用a-date-pickerf组件，下面上代码
a-date-picker
//开始时间选择
<a-date-picker
v-decorator="[
'startDate',
{
initialValue: '',
rules: [{ required: true, message: '请选择日期' }],
},
]"
show-time
:disabled-date="disabledDateStart"
placeholder="开始时间"
format="YYYY-MM-DD HH:mm"
value-format="YYYY-MM-DD HH:mm"
@change="onChangeStart"
@ok="onOkStart" />
//结束时间选择
<a-date-picker
v-decorator="[
'endDate',
{
initialValue:'',
rules: [{ required: true, message: '请选择日期' }],
},
]"
show-time
:disabled-date="disabledDateEnd"
format="YYYY-MM-DD HH:mm"
value-format="YYYY-MM-DD HH:mm"
placeholder="结束时间"
@change="onChangeEnd"
@ok="onOkEnd" />
如上面代码就是我们项目中目前的使用情况，a-date-picker组件的基本使用在这里就不说了，有想看的直接点击查看，这里主要说一下我们项目中的使用场景和解决方法，业务需求是开始时间必须要晚于当前时间，结束时间必须要晚于开始时间，如果先选择了结束时间，那么开始时间要早于结束时间切晚于当前时间
开始时间使用方法
这里使用的是组件中的:disabled-date属性，首先是开始时间，也就是上述代码中的disabledDateStart调用的方法，这里要注意开始时间有两个限制条件，1.当先选择开始时间时，要晚于当前时间。2.先选择了结束时间，后选择开始时间时，这时要早于结束时间并且晚于当前时间，下面上代码
disabledDateStart (current) {
if (!this.form.getFieldValue('endDate')) { //这里的作用是获取到结束时间选择框中的值
return current && current < moment().endOf('day').subtract(1, 'days') //这样写是只能选择大于等于当前时间
} else {
return (
(current && moment(this.form.getFieldValue('endDate')).endOf('day') < current) ||
current < moment().endOf('day').subtract(1, 'day') //这里的情况是先选择了结束时间的情况，注意：在这里同时满足晚于当前时间和早于结束时间使用的是'||'而不是'&&'
)
}
},
结束时间使用方法
结束时间使用方法和开始时间使用方法基本相同，结束时间也是有两种情况，1.先选择开始时间的时候，结束时间要晚于开始时间。2.没选择开始时间，直接先选择结束时间的时候，这时候结束时间要晚于当前时间，代码如下
disabledDateEnd (current) {
if (!this.form.getFieldValue('startDate')) {
return current && current < moment().endOf('day').subtract(1, 'days')
} else {
return current && current < moment(this.form.getFieldValue('startDate')).endOf('day').subtract(1, 'days')
}
},
总结
上面代码用到了moment,记得要引入import moment from 'moment'
