Date Picker · Bitsy UI

Public web API

A label, a control row with a text input and a button, a format hint, a hidden ISO input, and a popover holding a Calendar.

<div data-bitsy-date-picker>
  <label for="due">Due date</label>
  <div data-bitsy-date-picker-control>
    <input id="due" type="text" inputmode="numeric" aria-describedby="due-format" value="31/10/2026">
    <button data-bitsy-date-picker-button type="button" commandfor="due-popover" command="toggle-popover" aria-label="Choose date, 31 October 2026">
      <svg aria-hidden="true"><!-- calendar icon --></svg>
    </button>
  </div>
  <p data-bitsy-date-picker-description id="due-format">DD/MM/YYYY</p>
  <input type="hidden" name="due" value="2026-10-31">
  <div data-bitsy-date-picker-popover popover id="due-popover" role="dialog" aria-label="Choose date">
    <!-- an authored Calendar Bit -->
  </div>
</div>

<script type="module">
  import { init as calendar } from "@bitsyui/bits/calendar/init";
  import { init as datePicker } from "@bitsyui/bits/date-picker/init";
  calendar();
  datePicker();
</script>

Config on the root: data-bitsy-date-picker-min and -max (ISO dates), passed to the Calendar and used to check typed dates.
The form submits the hidden ISO value. The text input has no name.
change fires on the root with event.detail.value (an ISO date, or an empty string when cleared or invalid).
Pages that must work without script use <input type="date"> in the control row.

Forms and states

Open the picker with the button, or type a date and press Tab.

Popover form, typed or picked

Due date

Format: DD/MM/YYYY

Native form, no script

Reminder date

Small, min, max, unavailable day

Start date

Format: MM/DD/YYYY

Invalid typed date

End date

Format: DD/MM/YYYY

Enter a date as DD/MM/YYYY.

Large and disabled

Ship date

Format: DD/MM/YYYY

Foundation versus Bit

The native date input draws a browser picker that cannot be styled and looks different in each engine. data-bitsy-date-picker keeps typing first, shows a Calendar Bit in a native popover, and exposes hooks for every color, size, and radius. Use the native form when a browser picker is enough.