A group of React components and utils for rendering a date picker with support for ranges via a two-up month calendar view.
See the storybook docs and demo to get a feel for what it can do.
npm install @acusti/date-picker
# or
yarn add @acusti/date-picker
To render a two-up date picker for selecting date ranges, handling date
selections via the onChange prop and showing months using abbreviations:
import { DatePicker } from '@acusti/date-picker';
import { useCallback, useState } from 'react';
function Popover() {
const [dateRangeStart, setDateRangeStart] = useState<null | string>(
null,
);
const [dateRangeEnd, setDateRangeEnd] = useState<null | string>(null);
const handleDateRangeChange = useCallback(({ dateEnd, dateStart }) => {
setDateRangeStart(dateStart);
if (dateEnd) {
setDateRangeEnd(dateEnd);
}
}, []);
return (
<DatePicker
isRange
isTwoUp
onChange={handleDateRangeChange}
useMonthAbbreviations
/>
);
}This is the type signature for the props you can pass to DatePicker:
type Props = {
className?: string;
dateEnd?: Date | string | number;
dateStart?: Date | string | number;
initialMonth?: number;
isRange?: boolean;
isTwoUp?: boolean;
monthLimitFirst?: number;
monthLimitLast?: number;
onChange: (payload: { dateEnd?: string; dateStart: string }) => void;
useMonthAbbreviations?: boolean;
};