75 lines
1.5 KiB
JavaScript
75 lines
1.5 KiB
JavaScript
import { makeStyles } from '@material-ui/core/styles'
|
|
import classnames from 'classnames'
|
|
import {
|
|
differenceInDays,
|
|
differenceInMonths,
|
|
isSameMonth,
|
|
set
|
|
} from 'date-fns/fp'
|
|
import React, { useState, useEffect } from 'react'
|
|
|
|
import Calendar from './Calendar'
|
|
|
|
const styles = {
|
|
wrapper: {
|
|
backgroundColor: 'white',
|
|
borderRadius: 10
|
|
}
|
|
}
|
|
|
|
const useStyles = makeStyles(styles)
|
|
|
|
const DateRangePicker = ({ minDate, maxDate, className, onRangeChange }) => {
|
|
const [from, setFrom] = useState(null)
|
|
const [to, setTo] = useState(null)
|
|
|
|
useEffect(() => {
|
|
onRangeChange(from, to)
|
|
}, [from, onRangeChange, to])
|
|
|
|
const classes = useStyles()
|
|
|
|
const handleSelect = (day, minDate, maxDate) => {
|
|
if (
|
|
(maxDate && differenceInDays(maxDate, day) > 0) ||
|
|
(minDate && differenceInDays(day, minDate) > 0)
|
|
)
|
|
return
|
|
|
|
if (from && !to && differenceInDays(day, from) > 0) {
|
|
setTo(from)
|
|
setFrom(day)
|
|
return
|
|
}
|
|
|
|
if (
|
|
from &&
|
|
!to &&
|
|
(isSameMonth(from, day) || differenceInMonths(from, day) > 0)
|
|
) {
|
|
setTo(
|
|
set({ hours: 23, minutes: 59, seconds: 59, milliseconds: 999 }, day)
|
|
)
|
|
return
|
|
}
|
|
|
|
setFrom(day)
|
|
setTo(null)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className={classnames(classes.wrapper, className)}>
|
|
<Calendar
|
|
from={from}
|
|
to={to}
|
|
minDate={minDate}
|
|
maxDate={maxDate}
|
|
handleSelect={handleSelect}
|
|
/>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default DateRangePicker
|