Skip to main content

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

PropertyDescriptionTypeDefault
valueselected value range@internationalized/date Date
minValueminimum selectable date value. Dates beyond this value will be disabled@internationalized/date Date
maxValuemaximum selectable date value. Dates beyond this value will be disabled@internationalized/date Date
isDisabledDisable the calendar componentbooleanfalse
onChangeCallback function when date is selectedfunction
isOpenopen the calendar popoverbooleanfalse
closeOnSelectClose datepicker on selecting a datebooleanfalse
labelstring