The Date Picker component provides a date input field with an integrated calendar picker.
import { OdsDatePicker } from '@ods/components/react-alt.date-picker';import { useState } from 'react';
export const Example = () => { const [value, setValue] = useState<string | undefined>();
return ( <OdsDatePicker value={value} onDateChange={setValue} /> )}
export default Example;The OdsDatePicker component leverages date-fns for date formatting and parsing. This means you can easily customize the date format to match your application’s requirements using the formatString property shown here and any format options supported by date-fns.
import { OdsDatePicker } from '@ods/components/react-alt.date-picker';
export const Example = () => { const today = new Date(); const septFirst = new Date(today.getFullYear(), 8, 1, 12);
return ( <OdsDatePicker formatString='MMMM do yyyy' value={septFirst.toISOString()} /> )}
export default Example;import { OdsDatePicker } from '@ods/components/react-alt.date-picker';import { useState } from 'react';import { DateRange } from 'react-day-picker';
export const Example = () => { const today = new Date(); const septFirst = new Date(today.getFullYear(), 8, 1, 12); const toDate = new Date(today.getFullYear(), 8, 1, 12); const fromDate = new Date(today.getFullYear(), 8, 1, 12);
fromDate.setDate(septFirst.getDate() + 15); toDate.setDate(septFirst.getDate() + 28);
const defaultRange: DateRange = { from: fromDate, to: toDate, };
const [range, setRange] = useState<DateRange>(defaultRange);
return ( <OdsDatePicker mode='range' calendarProps={{ numberOfMonths: 2 }} autoClose={false} value={range} onDateRangeChange={setRange} /> )}
export default Example;import { OdsDatePicker } from '@ods/components/react-alt.date-picker';
export const Example = () => { return ( <form noValidate> <OdsDatePicker required label='Label' /> </form> )}
export default Example;import { OdsDatePicker } from '@ods/components/react-alt.date-picker';
export const Example = () => { return ( <form noValidate> <OdsDatePicker disabled required helpText='Sample help text' label='Label' maxlength={5} showCountText={true} /> </form> )}
export default Example;import { OdsDatePicker } from '@ods/components/react-alt.date-picker';
export const Example = () => { return ( <form noValidate> <OdsDatePicker errorText='Sample error text' required label='Label' maxlength={5} showCountText={true} /> </form> )}
export default Example;import { OdsDatePicker } from '@ods/components/react-alt.date-picker';This component is still in development and cannot be imported at this time.