Date Input

<sl-date-input> | SlDateInput
Since 2.0 hub24

Date input field

The date input supports the following shortcuts:

  1. ‘T’ - today
  2. ‘Y’ - yesterday
  3. ‘-{n}’ - n days before currently entered date where n is an integer. If currently entered date is empty, will use today’s date.
  4. ‘+{n}’ - similar to ‘-{n}’, but after.
  5. ‘-{n}w’ - n weeks before currently entered date where n is an integer. If currently entered date is empty, will use today’s date.
  6. ‘+{n}w’ - similar to ‘-{n}w’, but after.
  7. ‘-{n}m’ - n months before currently entered date where n is an integer. If currently entered date is empty, will use today’s date.
  8. ‘+{n}m’ - similar to ‘-{n}y’, but after.
  9. ‘-{n}y’ - n years before currently entered date where n is an integer. If currently entered date is empty, will use today’s date.
  10. ‘+{n}y’ - similar to ‘-{n}y’, but after.
<sl-date-input></sl-date-input>

Examples

Hiding the calendar

Use show-calendar="no" to hide the calendar

<sl-date-input show-calendar="no"></sl-date-input>

Setting value

Use value in YYYY-MM-DD format to set value.


<sl-date-input value="2024-01-01"></sl-date-input>

Configuring the label

Use the label and stacked attributes as per a normal input field

<sl-date-input label="My label"></sl-date-input>

<sl-date-input label="My stacked label" stacked></sl-date-input>

Required options

Use the required attribute as per a normal input field

<sl-date-input label="Required date" required></sl-date-input>

[component-metadata:sl-date-input]

Properties

Name Description Reflects Type Default
label The label for the date input field string ''
stacked Whether the label should always be stacked boolean false
required Whether the date input is required boolean false
showQuarters
show-quarters 		Show side panel presets for financial year quarters boolean -
showFinancialYears
show-financial-years 		Show side panel presets for financial years boolean -
value The value string ''
valueFrom The value of the date range input field from string ''
valueTo The value of the date range input field to string ''
isFromValue Used for date range boolean false
isToValue Used for date range boolean false
showCalendar
show-calendar 		Show calendar? Use ‘no’ to stop the calendar from appearing 'yes' | 'no' 'yes'
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-change When the date value is changed -
select-range Emitted when the ‘from’ date is selected to prime the ‘to’ date for date range input. -

Learn more about events.

Dependencies

This component automatically imports the following dependencies.

  • <sl-icon>
  • <sl-input>