0.7.0 • Published 10 months ago
@acusti/date-picker v0.7.0
@acusti/date-picker
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.
Usage
npm install @acusti/date-picker
# or
yarn add @acusti/date-picker
Example
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
/>
);
}
Props
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;
};
0.7.0
10 months ago
0.6.0
1 year ago
0.5.1
1 year ago
0.5.0
1 year ago
0.5.0-pre
1 year ago
0.4.1
1 year ago
0.4.0
1 year ago
0.3.1
1 year ago
0.3.0
1 year ago
0.2.1
1 year ago
0.2.2
1 year ago
0.2.0
2 years ago
0.1.0
2 years ago
0.1.1
2 years ago
0.0.5
2 years ago
0.0.6
2 years ago
0.0.4
2 years ago
0.0.3
2 years ago
0.0.2
2 years ago
0.0.1
2 years ago