关于日期选择框组件,也是非常重要的,在项目中对于如何不能选择之后的数据,在这个问题上面也是花了比较长的时间去研究的,最后使用了一个叫moment的插件,才解决了这个问题!
单个选择日期带之后的日期不能选的功能
import moment from 'moment';
const currentDate = moment();
const disabledDate = function (date, view) {
switch (view) {
case 'date':
return date.valueOf() >= currentDate.valueOf();
case 'year':
return date.year() > currentDate.year();
case 'month':
return date.year() * 100 + date.month() > currentDate.year() * 100 + currentDate.month();
default: return false;
}
};
<FormItem colSpan={4} label="时间筛选: ">
<DatePicker hasClear onChange={(val) => {
const startTime = val || ''
const conditionCopy = common.changeJson(condition)
conditionCopy.date = [startTime != '' ? `${startTime}` : '']
setcondition(conditionCopy)
}} defaultValue={`${common.getBeforeDate(1)}`} disabledDate={disabledDate} />
</FormItem>
开始时间和结束时间关联日期带时分秒
<FormItem colSpan={5} label="时间筛选: ">
<RangePicker hasClear format="YYYY-MM-DD" onChange={(val) => {
const startTime = val[0] || ''
const endTime = val[1] || ''
const conditionCopy = common.changeJson(condition)
conditionCopy.date = [startTime != '' ? `${common.getdate(startTime)}` : '', endTime != '' ? `${common.getdate(endTime)}` : '']
setcondition(conditionCopy)
}} showTime={{ format: 'HH:mm:ss', minuteStep: 15 }}
defaultValue={[`${condition.date[0]}`, `${condition.date[1]}`]}
disabledDate={disabledDate}
/>
</FormItem>