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
Use the range-type attribute to specify a custom range type.
Use the from-date and to-date attributes to specify from/to dates.
<sl-date-range-input range-type="Custom" from-date="2024-01-01" to-date="2024-06-30"></sl-date-range-input>
Hiding the range type
Use hide-range-type to hide the range type select option. If this is hidden, the range type
will default to ‘Custom’.
<sl-date-range-input hide-range-type show-shortcuts></sl-date-range-input>
Always editing mode
Use the always-editing attribute to ensure the input is always shown as an editable input
<sl-date-range-input always-editing hide-range-type show-shortcuts></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>
Showing shortcut options
Use the show-quarters attribute to show the quarterly shortcuts. Note that shortcuts are only
shown when the range type is ‘Custom’
<sl-date-range-input range-type="Custom" show-quarters></sl-date-range-input>
Use the show-financial-years attribute to show the financial year shortcuts
<sl-date-range-input range-type="Custom" show-financial-years></sl-date-range-input>
Use the financial-years attribute to limit the financial years used
<sl-date-range-input range-type="Custom" show-financial-years financial-years="[2008, 2020]"></sl-date-range-input>
Use the show-shortcuts attribute to show both the quarter and financial year shortcuts.
Equivalent to supplying both show-quarters and show-financial-years.
<sl-date-range-input range-type="Custom" show-shortcuts></sl-date-range-input>
[component-metadata:sl-date-range-input]
Properties
| Name | Description | Reflects | Type | Default |
|---|---|---|---|---|
rangeType
range-type
|
Date range type. |
|
string
|
'12MonthsTo'
|
hideRangeType
hide-range-type
|
Whether to hide the range type |
boolean
|
false
|
|
fromDate
from-date
|
From date. |
|
string
|
'1900-01-01'
|
toDate
to-date
|
The to date. |
|
- | - |
allowFutureDates
allow-future-dates
|
Allow future dates |
|
boolean
|
false
|
showQuarters
show-quarters
|
Show quarters shortcuts. Shortcuts only show when range type is Custom |
boolean
|
false
|
|
showFinancialYears
show-financial-years
|
Show financial year shortcuts. Shortcuts only show when range type is Custom |
boolean
|
false
|
|
financialYears
financial-years
|
Financial years |
number[]
|
[]
|
|
showShortcuts
show-shortcuts
|
Show both quarter and financial year shortcuts. Shortcuts only show when range type is Custom |
boolean
|
false
|
|
alwaysEditing
always-editing
|
Always show in ‘editing’ mode so the user can see an input without the need to click first |
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-dropdown><sl-icon><sl-icon-button><sl-input><sl-option><sl-popup><sl-tooltip>