Date Range Input Hds

<sl-date-range-input-hds> | SlDateRangeInputHds
Since 2.0 experimental

Date range input with preset ranges.

<sl-date-range-input-hds id="hds-date-range-input"></sl-date-range-input-hds>
<script>
  const dateRangeInput = document.getElementById('hds-date-range-input');

  dateRangeInput.showQuarters = true;
  dateRangeInput.showFinancialYears = true;
</script>

Examples

First Example

TODO

Second Example

TODO

[component-metadata:sl-date-range-input-hds]

Slots

Name Description
(default) The default slot.
example An example slot.

Learn more about using slots.

Properties

Name Description Reflects Type Default
valueFrom The value of the date range input field from string ''
valueTo The value of the date range input field to string ''
showQuarters
show-quarters 		Show side panel presets for financial year quarters boolean false
showFinancialYears
show-financial-years 		Show side panel presets for financial years 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-event-name Emitted as an example. -

Learn more about events.

Custom Properties

Name Description Default
--example An example CSS custom property.

Learn more about customizing CSS custom properties.

Parts

Name Description
base The component’s base wrapper.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <sl-example>