Date Range Input
<sl-date-range-input> | SlDateRangeInput
Allows the user to select a date range.
<sl-date-range-input></sl-date-range-input>
Examples
Setting default values
<sl-date-range-input range-type="Custom" from-date="2024-01-01" to-date="2024-06-30"></sl-date-range-input>
Allowing future dates
Use the allow-future-dates attribute to allow future dates
<sl-date-range-input allow-future-dates="yes"></sl-date-range-input>
[component-metadata:sl-date-range-input]
Properties
| Name | Description | Reflects | Type | Default |
|---|---|---|---|---|
rangeType
range-type
|
Date range type. |
|
string
|
'12MonthsTo'
|
fromDate
from-date
|
From date. |
|
string
|
'1900-01-01'
|
toDate
to-date
|
The to date. |
|
- | - |
allowFutureDates
allow-future-dates
|
Allow future dates |
|
boolean
|
false
|
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about attributes and properties.
Events
| Name | React Event | Description | Event Detail |
|---|---|---|---|
sl-input |
|
Emitted when date values or range type change. | - |
Learn more about events.
Dependencies
This component automatically imports the following dependencies.
<sl-icon><sl-icon-button><sl-input><sl-option><sl-popup><sl-select><sl-tag>