Date range picker
The Date range picker component allows users to select a range of dates via a calendar or text input.
import { ... } from '@ag.ds-next/react/date-range-picker';Usage
Date range picker components can be imported via the date-range-picker entrypoint in the @ag.ds-next/react package.
For example:
import { ... } from '@ag.ds-next/react/date-range-picker';Props
| Prop | Type | Description |
|---|---|---|
| onChange | (day: DateRange) => void | Function to be fired following a change event. |
| value | DateRangeWithString | The value of the field. |
| allowedDateFormats? | readonly ("dd/MM/yyyy" | "dd-MM-yyyy" | "dd MM yyyy" | "MM/dd/yyyy" | "MM-dd-yyyy" | "MM dd yyyy" | "do MMMM yyyy" | "do MMM yyyy" | "MMMM do yyyy" | "MMM do yyyy" | "d MMMM yyyy" | ... 6 more ... | "MMM dd yyyy")[] | Specifies the date formats that can be parsed. |
| dateFormat? | "dd/MM/yyyy" | "dd-MM-yyyy" | "dd MM yyyy" | "MM/dd/yyyy" | "MM-dd-yyyy" | "MM dd yyyy" | "do MMMM yyyy" | "do MMM yyyy" | "MMMM do yyyy" | "MMM do yyyy" | "d MMMM yyyy" | ... 7 more ...Default: "dd/MM/yyyy" | Used to adjust the date format displayed in the text input and secondary label. |
| disabled? | boolean | If true, the field will not be interactive. |
| fromInputRef? | Ref<HTMLInputElement> | Ref to the start input element. |
| fromInvalid? | booleanDefault: false | If true, the invalid state will be rendered for the start date. |
| fromLabel? | stringDefault: "Start date" | The label above the start date. |
| hideOptionalLabel? | boolean | If true, "(optional)" will never be appended to the legend even when `required` is `false`. |
| hint? | string | Provides extra information about the group of fields. |
| id? | string | Defines an identifier (ID) which must be unique. |
| legend? | string | Describes the purpose of the group of fields. |
| maxDate? | Date | If set, any days after this date will not be selectable. |
| message? | string | Message to show when the field is invalid. |
| minDate? | Date | If set, any days before this date will not be selectable. |
| onFromInputChange? | ((inputValue: string) => void) | Function to be fired when the input value is updated. |
| onToInputChange? | ((inputValue: string) => void) | Function to be fired when the input value is updated. |
| required? | booleanDefault: false | If false, "(optional)" will not be appended to the legend. |
| toInputRef? | Ref<HTMLInputElement> | Ref to the end input element. |
| toInvalid? | booleanDefault: false | If true, the invalid state will be rendered for the end date. |
| toLabel? | stringDefault: "End date" | The label above the end date. |
| yearRange? | { from: number; to: number; } | The range of options to display in calendar year select. |
Source
You can view the full source code for this package on Github.