Date picker
The Date picker component allows users to select a single date via a calendar or text input.
import { ... } from '@ag.ds-next/react/date-picker';Usage
Date picker components can be imported via the date-picker entrypoint in the @ag.ds-next/react package.
For example:
import { ... } from '@ag.ds-next/react/date-picker';Props
| Prop | Type | Description |
|---|---|---|
| label | string | Describes the purpose of the field. |
| onChange | (day: Date | undefined) => void | Function to be fired following a change event. |
| value | string | Date | undefined | The value of the field. |
| autoComplete? | string | |
| autoFocus? | boolean | |
| block? | boolean | If true, the field will stretch to the fill the width of its container. |
| 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 | |
| hideOptionalLabel? | boolean | If true, "(optional)" will never be appended to the label. |
| hint? | string | Provides extra information about the field. |
| id? | string | |
| initialMonth? | Date | The calendar month to initially show if no value is set. |
| inputRef? | Ref<HTMLInputElement> | Ref to the input element. |
| invalid? | booleanDefault: false | If true, the invalid state will be rendered. |
| maxDate? | Date | If set, any days after this date will not be selectable. |
| maxWidth? | "md" | "lg" | "xl"Default: "md" | The maximum width of the field. |
| message? | string | Message to show when the field is invalid. |
| minDate? | Date | If set, any days before this date will not be selectable. |
| name? | string | |
| onBlur? | FocusEventHandler<HTMLInputElement> | |
| onFocus? | FocusEventHandler<HTMLInputElement> | |
| onInputChange? | ((inputValue: string) => void) | Function to be fired when the input value is updated. |
| required? | boolean | If false, "(optional)" will be appended to the label. |
| 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.