Name | Type | Default | Description |
---|---|---|---|
datesSelectionBoxes required | IDatesSelectionBox[] | This prop configures the portion to the right of the calendar, inside the datepicker dropdown | |
applyLabel | string | "Apply" | The text displayed inside the "Apply" button |
cancelLabel | string | "Cancel" | The text displayed inside the "Cancel" button |
className | string | CSS classes to set on the DatePicker outer most element | |
clearLabel | string | "Clear" | The text displayed inside the "clear" button |
days | string[] | ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] | The label of each day of the week displayed in the calendar |
dropOptions | Partial<IDropOwnProps> | Additional props to set on the underlying Drop component | |
extraDropdownClasses | string[] | [] | CSS classes to set on the DatePicker dropdown container |
extraDropdownToggleClasses | string[] | [] | CSS classes to set on the DatePicker toggle button |
id | string | A unique identifier that identifies the DatePicker in the PlasmaState. Useful to retrieve the selected value. | |
initialDateRange | DatePickerDateRange | [] | The dates initially selected. Eventhough no dates are set here by default, the current date will be selected by default |
initiallyUnselected | boolean | false | Whether the datepicker is intially empty |
isClearable | boolean | false | Whether the datepicker can be set to empty |
isLinkedToDateRange | boolean | If set to false, it will sync both the lower and upper to the same value | |
key | Key | ||
label | string | The text displayed in the downdown button when no dates are selected | |
lowerLimitPlaceholder | string | "Select a start date" | The text displayed in the start date text input when no start date is selected |
months | string[] | ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] | The list of months available in the calendar |
onBeforeApply | () => void | A callback function that is executed before applying a new selection of dates | |
onRight | boolean | When true, the dropdown will be aligned with the right edge of its opening button | |
readonly | boolean | When true, the datepicker will not be editable | |
ref | LegacyRef<DatePickerDropdown> | ||
renderDatePickerWhenClosed | boolean | true | Whether the datepicker dropdown content is rendered when closed |
selectionRules | ICalendarSelectionRule[] | [] | Selection rules that may restrict the dates available for selection |
setToNowTooltip | string | "Set to now" | The text displayed when hovering over the set to now button |
simple | boolean | If set to true, only the calendar will be visible | |
startingDay | number | 0 | The starting day of the week displayed in the calendar in the form of an index of the "days" array prop |
startingMonth | number | current month | The month initially displayed in the calendar in the form of an index of the "months" array prop |
startingYear | number | current year | The year initially displayed in the calendar in the form of an index of the "years" array prop |
toLabel | string | "to" | The text displayed in between the 2 selected dates of a date range |
upperLimitPlaceholder | string | "Select an end date" | The text displayed in the end date text input when no end date is selected |
withDrop | boolean | false | Whether the dropdown should be rendered using the Drop component. Using the Drop component can be useful to render the dropdown content outside of the standard DOM tree. This can be needed when rendering a datepicker inside a Modal and you want the dropdown content to display above or outside the Modal's natural perimeter. |
years | string[] | 30 years before and after today | The list of years available in the calendar |
attributeName deprecated | string | This was used in conjunction with the old Table component that is now deprecated |
Whenever possible, provide ready-made selections of the most contextually relevant values (e.g., last week, last month, etc.).
The choice of date picker type depends on the input you want to submit and on the precision required.
Type | Purpose |
---|---|
Single date | Used to select a specific day. |
Date range | Used to select a period of time, ranging from one to multiple days. |
With time selection | Single date and date range pickers can be configured to allow for hour and minute selection. |