59 lines
1.3 KiB
JavaScript
59 lines
1.3 KiB
JavaScript
import classnames from 'classnames'
|
|
import { compareAsc, differenceInDays, set } from 'date-fns/fp'
|
|
import * as R from 'ramda'
|
|
import React, { useState, useEffect } from 'react'
|
|
|
|
import Calendar from './Calendar'
|
|
|
|
const DateRangePicker = ({ minDate, maxDate, className, onRangeChange }) => {
|
|
const [from, setFrom] = useState(null)
|
|
const [to, setTo] = useState(null)
|
|
|
|
useEffect(() => {
|
|
onRangeChange(from, to)
|
|
}, [from, onRangeChange, to])
|
|
|
|
const handleSelect = day => {
|
|
if (
|
|
(maxDate && compareAsc(maxDate, day) > 0) ||
|
|
(minDate && differenceInDays(day, minDate) > 0)
|
|
)
|
|
return
|
|
|
|
if (from && !to) {
|
|
if (differenceInDays(from, day) >= 0) {
|
|
setTo(
|
|
set({ hours: 23, minutes: 59, seconds: 59, milliseconds: 999 }, day)
|
|
)
|
|
} else {
|
|
setTo(
|
|
set(
|
|
{ hours: 23, minutes: 59, seconds: 59, milliseconds: 999 },
|
|
R.clone(from)
|
|
)
|
|
)
|
|
setFrom(day)
|
|
}
|
|
return
|
|
}
|
|
|
|
setFrom(day)
|
|
setTo(null)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className={classnames('bg-white rounded-xl', className)}>
|
|
<Calendar
|
|
from={from}
|
|
to={to}
|
|
minDate={minDate}
|
|
maxDate={maxDate}
|
|
handleSelect={handleSelect}
|
|
/>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default DateRangePicker
|