Timepicker Showcase

This showcase demonstrates how native <input type="time"> and <input type="date"> controls fit into the dsx form system by using the existing .dsx-input class.

Live Preview

Features demonstrated

Native type="time" input with .dsx-input
Native type="date" input with .dsx-input
Side-by-side date + time scheduling pair
Stacked field wrapper with label, hint, and error messaging via .dsx-field
Compact 2rem small variant with .dsx-input--sm
Disabled and validation/error states
Optional <dsx-datepicker> comparison, because the package ships a datepicker component

Markup pattern

<div class="dsx-field">
  <label class="dsx-field__label" for="start-time">Start time</label>
  <div class="dsx-field__control">
    <input id="start-time" class="dsx-input" type="time" value="09:30">
  </div>
</div>

<div class="dsx-field">
  <label class="dsx-field__label" for="end-date">End date</label>
  <div class="dsx-field__control">
    <input id="end-date" class="dsx-input" type="date" value="2024-03-15">
  </div>
</div>

Date + time pair

<div class="demo-row">
  <div class="dsx-field">
    <label class="dsx-field__label" for="meeting-date">Meeting date</label>
    <div class="dsx-field__control">
      <input id="meeting-date" class="dsx-input" type="date" value="2024-03-18">
    </div>
  </div>

  <div class="dsx-field">
    <label class="dsx-field__label" for="meeting-time">Meeting time</label>
    <div class="dsx-field__control">
      <input id="meeting-time" class="dsx-input" type="time" value="14:00">
    </div>
  </div>
</div>

Validation and compact sizing

<div class="dsx-field dsx-field--small">
  <label class="dsx-field__label" for="reminder-time">Reminder time</label>
  <div class="dsx-field__control">
    <input id="reminder-time" class="dsx-input dsx-input--sm" type="time" value="08:15">
  </div>
</div>

<div class="dsx-field dsx-field--error">
  <label class="dsx-field__label dsx-field__label--required" for="delivery-time">Delivery time</label>
  <div class="dsx-field__control">
    <input id="delivery-time" class="dsx-input" type="time" aria-invalid="true" aria-describedby="delivery-time-error">
  </div>
  <div class="dsx-field__error" id="delivery-time-error">Select a delivery time.</div>
</div>

Optional web component

dsx also includes <dsx-datepicker>, so the showcase includes it as a progressive-enhancement option when a built-in calendar popover is preferred over the browser-native picker.

<dsx-datepicker value="2024-03-15" min="2024-03-01" max="2024-03-31"></dsx-datepicker>