DatePicker
info
DatePicker
component requires additional dependancy of @internationalized/date
to be installed.
We will be working on removing this additional dependancy in the future.
npm install --save @internationalized/date
Import
import { DatePicker } from "@sparrowengg/twigs-react";
Usage
import { parseDate } from "@internationalized/date";
function App() {
const [value, setValue] = React.useState(parseDate("2023-07-24"));
return (
<DatePicker value={value} onChange={setValue} label="Enter date of birth" />
);
}
Props
Property | Description | Type | Default |
---|---|---|---|
value | selected value range | @internationalized/date Date | |
minValue | minimum selectable date value. Dates beyond this value will be disabled | @internationalized/date Date | |
maxValue | maximum selectable date value. Dates beyond this value will be disabled | @internationalized/date Date | |
isDisabled | Disable the calendar component | boolean | false |
onChange | Callback function when date is selected | function | |
isOpen | open the calendar popover | boolean | false |
closeOnSelect | Close datepicker on selecting a date | boolean | false |
label | string | ||
enablePortal | Calendar popover will render in body | boolean | false |
portalTarget | Render Calendar Popover in specific element | Element | false |
onDaySelect | Callback function when day is selected | (date: DateValue) => void | |
onMonthSelect | Callback function when month is selected | (date: DateValue) => void | |
onYearSelect | Callback function when year is selected | (date: DateValue) => void | |
showFooter | Show footer with action button | boolean | true |
footerAction | Action to be performed on footer button click | (state: CalendarState) => void | |
footerActionText | Text to be displayed on footer button | string | "Select" |
renderFooter | Custom footer component | (state: CalendarState) => ReactNode | |
containerCSS | Custom CSS for the container element | CSS | |
calendarContainerCSS | Custom CSS for the calendar container element | CSS | |
popoverContentProps | Additional props to be passed to the popover content component | PopoverContentProps |