Updated date range handling.

This commit is contained in:
Mike Cao 2023-05-28 22:28:11 -07:00
parent bfb52eb678
commit e9b0d3f796
4 changed files with 25 additions and 15 deletions

View file

@ -2,7 +2,6 @@ import { useState } from 'react';
import { Button, ButtonGroup, Calendar } from 'react-basics';
import { isAfter, isBefore, isSameDay } from 'date-fns';
import useLocale from 'hooks/useLocale';
import { getDateRangeValues } from 'lib/date';
import { getDateLocale } from 'lib/lang';
import { FILTER_DAY, FILTER_RANGE } from 'lib/constants';
import useMessages from 'hooks/useMessages';
@ -19,7 +18,7 @@ export function DatePickerForm({
const [selected, setSelected] = useState(
isSameDay(defaultStartDate, defaultEndDate) ? FILTER_DAY : FILTER_RANGE,
);
const [date, setDate] = useState(defaultStartDate);
const [singleDate, setSingleDate] = useState(defaultStartDate);
const [startDate, setStartDate] = useState(defaultStartDate);
const [endDate, setEndDate] = useState(defaultEndDate);
const { locale } = useLocale();
@ -27,14 +26,14 @@ export function DatePickerForm({
const disabled =
selected === FILTER_DAY
? isAfter(minDate, date) && isBefore(maxDate, date)
? isAfter(minDate, singleDate) && isBefore(maxDate, singleDate)
: isAfter(startDate, endDate);
const handleSave = () => {
if (selected === FILTER_DAY) {
onChange({ ...getDateRangeValues(date, date), value: 'custom' });
onChange(`range:${singleDate.getTime()}:${singleDate.getTime()}`);
} else {
onChange({ ...getDateRangeValues(startDate, endDate), value: 'custom' });
onChange(`range:${startDate.getTime()}:${endDate.getTime()}`);
}
};
@ -48,7 +47,12 @@ export function DatePickerForm({
</div>
<div className={styles.calendars}>
{selected === FILTER_DAY && (
<Calendar date={date} minDate={minDate} maxDate={maxDate} onChange={setDate} />
<Calendar
date={singleDate}
minDate={minDate}
maxDate={maxDate}
onChange={setSingleDate}
/>
)}
{selected === FILTER_RANGE && (
<>