Как ограничить период в Atnd datePicker используя moment.js?
Всем привет. помогите решить задачу. Есть два пикета даты, использую Ant Design + moment.js. Суть такая, стартовая дата ограничена от текущей до трех лет назад, если разница между стартовой и конечной датой меньше 30 дней, то максимальная дата === текущей.Если больше то максимальная дата и время === стразовая дата + 30 дней и остальные даты должны быть не активны. именно это условие и не получается реализовать. Для того чтобы сделать неактивными датами используются пропы disabledDate disabledTime
Компонент:
const InputDatePicker = (props) => {
const [startDate, setStartDate] = useState('')
const [endDate, setEndDate] = useState('')
const minDate = moment().subtract(3, 'years')
const maxDate = moment()
const getRange = (start, end) =>
[...Array(end - start + 1).keys()].map((i) => i + start) // массив для времени
const disabledStartDate = (current) => {
if (current === null) {
return null
}
return (
(minDate !== null &&
current.isBefore(minDate) &&
!current.isSame(minDate, 'day')) ||
(maxDate !== null &&
current.isAfter(maxDate) &&
!current.isSame(maxDate, 'day'))
)
} // начальные даты
const disabledEndDate = (current) => {
if (current === null) {
return null
}
return (
(startDate != null &&
current.isBefore(startDate) &&
!current.isSame(startDate, 'day')) ||
(maxDate != null && // <<<< ---- ?????? условие если разница больше 30 дней
current.isAfter(maxDate) &&
!current.isSame(maxDate, 'day'))
)
} //конечные даты
const disabledStartTime = (current) => {
if (current == null) {
return null
}
if (current.isSame(minDate, 'day')) {
return {
disabledHours: () =>
minDate.hour() > 0 ? getRange(0, minDate.hour() - 1) : [],
disabledMinutes: (hour) =>
hour === minDate.hour() && minDate.minutes() > 0
? getRange(0, minDate.minutes() - 1)
: [],
disabledSeconds: (hour) =>
hour === minDate.hour() && minDate.second() > 0
? getRange(0, minDate.second() - 1)
: [],
}
}
if (current.isSame(maxDate, 'day')) {
return {
disabledHours: () => getRange(maxDate.hour() + 1, 24),
disabledMinutes: (hour) =>
hour === maxDate.hour() ? getRange(maxDate.minutes() + 1, 60) : [],
disabledSeconds: (hour) =>
hour === maxDate.hour() && maxDate.second() > 0
? getRange(maxDate.second() + 1, 60)
: [],
}
}
return null
}// начальное время
const disabledEndTime = (current) => {
// ????
}
return (
<div>
<DatePicker
id="startField"
format="DD.MM.YYYY HH:mm:ss"
placeholder="Початкова дата"
showTime
onFocus={(e) => e.preventDefault()}
onBlur={(e) => e.preventDefault()}
onChange={(e) => setStartDate(e)}
locale={locale}
disabledDate={disabledStartDate}
disabledTime={disabledStartTime}
/>
<DatePicker
id="endField"
format="DD.MM.YYYY HH:mm:ss"
locale={locale}
showTime
placeholder="Кінцева дата"
onFocus={(e) => e.preventDefault()}
onBlur={(e) => e.preventDefault()}
onChange={(e) => setEndDate(e)}
disabledDate={disabledEndDate}
disabledTime={disabledEndTime}
/>
</div>
)
}
Очень нужна помощь !!