Custom label to be used by screen readers. When provided, an aria-label will be added to the element.
"a user friendly label for screen readers"
When using range, Whether the next date selection will affect the start or end bound of the range.
How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.
"start"
"center"
"end"
"stretch"
An array of two numbers indicating the limits on navigation in ISO8601 format
["2018-09-01", "2018-12-31"]
Function that will be called to render each day.
It will be passed ({date, day, isInRange, isSelected})
where date
is a string containing an ISO8601 date for the day being rendered, day
is a number containing the day of the month being rendered, isInRange
is a boolean indicating whether the date is within a selected range of
dates, and isSelected
is a boolean indicating whether this date
is selected.
Multiple selected dates in ISO8601 format. Items that are an array indicate a range of dates.
["2018-10-12", "2018-10-17"]
[["2018-10-19", "2018-11-23"]]
Multiple dates in ISO8601 format that should not be selectable. Items that are an array indicate a range of dates.
["2018-09-21", "2018-09-27"]
[["2018-12-23", "2018-12-26"]]
If specified, the entire calendar header will be managed by the caller. The function passes the following options:
{
date: Date,
locale: string,
onPreviousMonth: func,
onNextMonth: func,
previousInBound: bool,
nextInBound: bool,
}
onPreviousMonth
and onNextMonth
are callbacks that will tell the
calendar to move between months.
previousInBound
and nextInBound
are booleans that tell, when using
bounds
, if the current date is within that range. You can then use that
to disable the previous and next buttons.
({ date: Date, locale: "en-US", onPreviousMonth: func, onNextMonth: func, previousInBound: bool, nextInBound: bool, }) => {}
The amount of margin around the component. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.
"xsmall"
"small"
"medium"
"large"
"xlarge"
{
"vertical": "...",
"horizontal": "...",
"top": "...",
"bottom": "...",
"left": "...",
"right": "..."
}
Called with an ISO8601 date when the user navigates to a different month.
('2018-10-22T12:22:00Z') => {}
Called with an ISO8601 date when
the user selects a day.
For single select, make this the subsequent date
property value.
For multiple select or ranges, toggle values in dates
.
Not specifying this property makes the component read only.
('2018-10-22T12:22:00Z') => {}
Whether to automatically manage multiple date selection as a range. When the user clicks the first date, onSelect will be called with that date. When the user selects another date, onSelect will be called with an array of two dates. If range = "array", then an array of dates will be returned even when the start or end date of the range is undefined.
true
false
Whether to show the days from the previous and next months.
trim
limits adjacent days shown to rows containing days in
the current month.
true
false
"FormNext"
"FormPrevious"
{
"0": "#",
"1": "6",
"2": "6",
"3": "6",
"4": "6",
"5": "6",
"6": "6",
"dark": "#f8f8f8",
"light": "#666666"
}