DatePicker
A calendar-based picker for selecting exact dates and date ranges.
CalendarProps
| Prop | Type | Required | Default | Description |
|---|
canChangeMonth | boolean | — | true | — |
captionElement | | React.ReactElement<Partial<CaptionElementProps>>
| React.ComponentClass<CaptionElementProps>
| React.SFC<CaptionElementProps> | — | — | — |
className | string | — | — | — |
classNames | ClassNames | — | — | — |
containerProps | React.DetailedHTMLProps<
React.HTMLAttributes<HTMLDivElement>,
HTMLDivElement
> | — | — | — |
dir | string | — | — | — |
disabledDays | Modifier | Modifier[] | — | — | — |
enableOutsideDaysClick | boolean | — | — | — |
firstDayOfWeek | number | — | — | — |
fixedWeeks | boolean | — | — | — |
fromMonth | Date | — | — | — |
initialMonth | Date | — | — | — |
labels | { previousMonth: string; nextMonth: string } | — | — | — |
locale | string | — | — | — |
localeUtils | LocaleUtils | — | — | — |
modifiers | Partial<Modifiers> | — | — | — |
modifiersStyles | object | — | — | — |
month | Date | — | — | — |
months | string[] | — | — | — |
navbarElement | | React.ReactElement<Partial<NavbarElementProps>>
| React.ComponentClass<NavbarElementProps>
| React.SFC<NavbarElementProps> | — | — | — |
numberOfMonths | number | — | 1 | — |
onBlur | (e: React.FocusEvent<HTMLDivElement>) => void | — | — | — |
onCaptionClick | (month: Date, e: React.MouseEvent<HTMLDivElement>) => void | — | — | — |
onDayClick | (
day: Date,
modifiers: DayModifiers,
e: React.MouseEvent<HTMLDivElement>
) => void | — | — | — |
onDayKeyDown | (
day: Date,
modifiers: DayModifiers,
e: React.KeyboardEvent<HTMLDivElement>
) => void | — | — | — |
onDayMouseDown | (
day: Date,
modifiers: DayModifiers,
e: React.MouseEvent<HTMLDivElement>
) => void | — | — | — |
onDayMouseEnter | (
day: Date,
modifiers: DayModifiers,
e: React.MouseEvent<HTMLDivElement>
) => void | — | — | — |
onDayMouseLeave | (
day: Date,
modifiers: DayModifiers,
e: React.MouseEvent<HTMLDivElement>
) => void | — | — | — |
onDayMouseUp | (
day: Date,
modifiers: DayModifiers,
e: React.MouseEvent<HTMLDivElement>
) => void | — | — | — |
onDayTouchEnd | (
day: Date,
modifiers: DayModifiers,
e: React.TouchEvent<HTMLDivElement>
) => void | — | — | — |
onDayTouchStart | (
day: Date,
modifiers: DayModifiers,
e: React.TouchEvent<HTMLDivElement>
) => void | — | — | — |
onFocus | (e: React.FocusEvent<HTMLDivElement>) => void | — | — | — |
onKeyDown | (e: React.KeyboardEvent<HTMLDivElement>) => void | — | — | — |
onMonthChange | (month: Date) => void | — | — | — |
onTodayButtonClick | (
day: Date,
modifiers: DayModifiers,
e: React.MouseEvent<HTMLButtonElement>
) => void | — | — | — |
onWeekClick | (
weekNumber: number,
days: Date[],
e: React.MouseEvent<HTMLDivElement>
) => void | — | — | — |
pagedNavigation | boolean | — | — | — |
renderDay | (date: Date, modifiers: DayModifiers) => React.ReactNode | — | — | — |
renderWeek | (
weekNumber: number,
week: Date[],
month: Date
) => React.ReactNode | — | — | — |
reverseMonths | boolean | — | — | — |
selectedDays | Modifier | Modifier[] | — | — | — |
showOutsideDays | boolean | — | — | — |
showWeekDays | boolean | — | — | — |
showWeekNumbers | boolean | — | — | — |
tabIndex | number | — | — | — |
todayButton | string | — | — | — |
toMonth | Date | — | — | — |
weekdayElement | | React.ReactElement<Partial<WeekdayElementProps>>
| React.ComponentClass<WeekdayElementProps>
| React.SFC<WeekdayElementProps> | — | — | — |
weekdaysLong | string[] | — | — | — |
weekdaysShort | string[] | — | — | — |
DatePickerProps
| Prop | Type | Required | Default | Description |
|---|
disabled | boolean | — | — | When true, the trigger will be disabled and the clear button is removed. |
id | string | — | — | — |
invalid | boolean | — | — | Indicate that the value does not conform to the format expected by the application. |
keyboardShortcutLegendPosition | left|right
| — | left | — |
onChange | (value: ISODate | undefined) => void | Yes | — | Called when the value changes. |
onClear | () => void | Yes | — | Called when the value is cleared. |
readOnly | boolean | — | — | When true, the value will be disabled as text |
size | InputSizeTypexsmall|small|medium|large
| — | medium | — |
value | ISODate | undefined | Yes | — | The value of the calendar, displayed in the trigger. |
Also accepts Pick< CalendarProps, 'disabledDays' | 'fromMonth' | 'initialMonth' | 'modifiers' | 'toMonth' > |
AGGridDatePickerProps
| Prop | Type | Required | Default | Description |
|---|
agGridProps | CustomCellEditorProps<any, Date | undefined> | Yes | — | These are the props you get from AG Grid when creating a custom cell editor.
You're supposed to pass them directly to this component. |
ariaLabel | string | — | — | Accessible name for the editor input. |
keyboardShortcutLegendPosition | left|right
| Yes | — | — |
Also accepts Pick< CalendarProps, 'disabledDays' | 'fromMonth' | 'initialMonth' | 'modifiers' | 'toMonth' > |
DateRangePickerProps
| Prop | Type | Required | Default | Description |
|---|
disabled | boolean | — | false | When true, the triggers will be disabled. |
id | string | — | — | Additional props to pass to the input element. |
invalid | boolean | — | — | Indicate that the value does not conform to the format expected by the application. |
onChange | (value: ISODateRange | undefined) => void | Yes | — | Called when the value changes. |
onClear | () => void | — | — | Called when the value is cleared. |
popoverClassName | string | — | — | Class name added to the calendar popover dialog. |
size | InputSizeTypexsmall|small|medium|large
| — | medium | — |
value | ISODateRange | undefined | Yes | — | The value of the calendar, displayed in the trigger. |
Also accepts Pick< CalendarProps, 'disabledDays' | 'fromMonth' | 'initialMonth' | 'modifiers' | 'toMonth' > |
