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';

DatePicker 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.
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.

You can view the full source code for this package on Github.