Date Picker
Allow users to select a specific date or date range.
Anchor to datepickerDatePicker
- Anchor to allowallowstring
Dates that can be selected.
A comma-separated list of dates, date ranges. Whitespace is allowed after commas.
The default
''
allows all dates.- Dates in
format allow a single date.
- Dates in
format allow a whole month.
- Dates in
format allow a whole year.
- Ranges are expressed as
start--end
. - Ranges are inclusive.- If either
start
orend
is omitted, the range is unbounded in that direction. - If parts of the date are omitted for
start
, they are assumed to be the minimum possible value. So2024--
is equivalent to2024-01-01--
. - If parts of the date are omitted for
end
, they are assumed to be the maximum possible value. So--2024
is equivalent to--2024-12-31
. - Whitespace is allowed either side of
--
.
- If either
- Dates in
- Anchor to allowDaysallowDaysstring
Days of the week that can be selected. These intersect with the result of
allow
anddisallow
.A comma-separated list of days. Whitespace is allowed after commas.
The default
''
has no effect on the result ofallow
anddisallow
.Days are
sunday
,monday
,tuesday
,wednesday
,thursday
,friday
,saturday
.- Anchor to defaultValuedefaultValuestring
Default selected value.
The default means no date is selected.
If the provided value is invalid, no date is selected.
- If
type="single"
, this is a date informat.
- If
type="multiple"
, this is a comma-separated list of dates informat.
- If
type="range"
, this is a range informat. The range is inclusive.
- If
- Anchor to defaultViewdefaultViewstring
Default month to display in
format.
This value is used until
view
is set, either directly or as a result of user interaction.Defaults to the current month in the user's locale.
- Anchor to disallowdisallowstring
Dates that cannot be selected. These subtract from
allow
.A comma-separated list of dates, date ranges. Whitespace is allowed after commas.
The default
''
has no effect onallow
.- Dates in
format disallow a single date.
- Dates in
format disallow a whole month.
- Dates in
format disallow a whole year.
- Ranges are expressed as
start--end
. - Ranges are inclusive.- If either
start
orend
is omitted, the range is unbounded in that direction. - If parts of the date are omitted for
start
, they are assumed to be the minimum possible value. So2024--
is equivalent to2024-01-01--
. - If parts of the date are omitted for
end
, they are assumed to be the maximum possible value. So--2024
is equivalent to--2024-12-31
. - Whitespace is allowed either side of
--
.
- If either
- Dates in
- Anchor to disallowDaysdisallowDaysstring
Days of the week that cannot be selected. This subtracts from
, and intersects with the result of
allow
anddisallow
.A comma-separated list of days. Whitespace is allowed after commas.
The default
''
has no effect on.
Days are
sunday
,monday
,tuesday
,wednesday
,thursday
,friday
,saturday
.- Anchor to namenamestring
An identifier for the field that is unique within the nearest containing form.
- Anchor to typetype"single" | "range"
- Anchor to valuevaluestring
Current selected value.
The default means no date is selected.
If the provided value is invalid, no date is selected.
Otherwise:
- If
type="single"
, this is a date informat.
- If
type="multiple"
, this is a comma-separated list of dates informat.
- If
type="range"
, this is a range informat. The range is inclusive.
Events:
- Invoked when any date is selected. Will fire before
.
- Invoked when the
value
is changed. Fortype="single"
andtype="multiple"
, this is the same as. For
type="range"
, this is only called when the range is completed by selecting the end date of the range.
- If
- Anchor to viewviewstring
Displayed month in
format.
is called when this value changes.
Defaults to
.
Anchor to eventsEvents
Learn more about registering events.
- Anchor to blurblurCallbackEventListener<typeof tagName> | null
- Anchor to changechangeCallbackEventListener<typeof tagName> | null
- Anchor to focusfocusCallbackEventListener<typeof tagName> | null
- Anchor to inputinputCallbackEventListener<typeof tagName> | null
- Anchor to viewchangeviewchangeCallbackEventListener<typeof tagName> | null
CallbackEventListener
(EventListener & {
(event: CallbackEvent<T>): void;
}) | null
CallbackEvent
Event & {
currentTarget: HTMLElementTagNameMap[T];
}
Code
Examples
Code
Default
<s-date-picker view="2025-05" type="range" value="2025-05-28--2025-05-31" ></s-date-picker>