<baht-datepicker>

Calendar picker (flatpickr, reskinned on the tokens: tinted header band, round day cells, Today / Clear footer; never the OS date wheel). Value is ISO yyyy-mm-dd — one string, a [start, end] range or a string[] by date_mode. min/max, disabled_dates and disabled_weekdays grey days out (and grey out Today) and the engine enforces them on validate.

Basic

<baht-datepicker></baht-datepicker>

<script>
  const el = document.querySelector('baht-datepicker');
  el.field = {
    "order": 1,
    "type": "date",
    "key": "dob",
    "label": "Date of birth",
    "max": "2026-12-31"
  };
  el.value = "1995-01-15";
</script>

Range

<baht-datepicker></baht-datepicker>

<script>
  const el = document.querySelector('baht-datepicker');
  el.field = {
    "order": 1,
    "type": "date",
    "key": "trip",
    "label": "Trip dates",
    "date_mode": "range",
    "date_format": "d M Y",
    "help": "Value is [start, end]"
  };
  el.value = [
    "2026-10-05",
    "2026-10-09"
  ];
</script>

Weekends + holidays off

<baht-datepicker></baht-datepicker>

<script>
  const el = document.querySelector('baht-datepicker');
  el.field = {
    "order": 1,
    "type": "date",
    "key": "appointment",
    "label": "Appointment",
    "min": "2026-04-01",
    "max": "2026-04-30",
    "disabled_weekdays": [
      0,
      6
    ],
    "disabled_dates": [
      "2026-04-06",
      "2026-04-13/2026-04-15"
    ],
    "help": "Mon–Fri, minus Chakri Day and Songkran"
  };
  el.value = null;
</script>

Multiple days

<baht-datepicker></baht-datepicker>

<script>
  const el = document.querySelector('baht-datepicker');
  el.field = {
    "order": 1,
    "type": "date",
    "key": "shifts",
    "label": "Shift days",
    "date_mode": "multiple"
  };
  el.value = [
    "2026-09-14",
    "2026-09-16",
    "2026-09-18"
  ];
</script>

Date and time

With enable_time the calendar gains a time picker, the value becomes yyyy-mm-ddTHH:mm, and the footer’s Today button reads Now (i18n key now): it picks today at the current time, to the minute, and closes the calendar. It follows the same min / max / disabled-day rules as Today and greys out when they exclude today.

Date and time

<baht-datepicker></baht-datepicker>

<script>
  const el = document.querySelector('baht-datepicker');
  el.field = {
    "order": 1,
    "type": "date",
    "key": "paid_at",
    "label": "Paid at",
    "enable_time": true,
    "time_24hr": true
  };
  el.value = null;
</script>

Props

Name	Type	Default	Description
`field`JS	`FieldDescriptor`	`—`	Field spec: { order, type, key, label?, placeholder?, options?, … }
`value`JS	`unknown`	`null`	Controlled value. Re-feed on every baht-input
`disabled`	`boolean`	`false`	Disable the control
`readonly`	`boolean`	`false`	Read-only
`required`	`boolean`	`false`	Show required mark
`show-optional`	`boolean`	`false`	Append the localized "(optional)" marker to the label when not required (set by <baht-form show-optional>).
`error`JS	`string \| null`	`null`	Validation message to display
`debounce`	`number \| undefined`	`—`	Debounce for typed edits (ms); unset = BahtFieldBase.defaultDebounce.
`field.date_mode`	`'single' \| 'range' \| 'multiple'`	`—`	Value shape: string \| [start, end] \| string[] (default single).
`field.date_format`	`string`	`—`	Display format in flatpickr tokens ('d/m/Y', 'j M Y'). Value stays ISO.
`field.min / field.max`	`string`	`—`	ISO bounds of the calendar (also validated).
`field.disabled_dates`	`string[]`	`—`	ISO days or inclusive intervals 'yyyy-mm-dd/yyyy-mm-dd' that cannot be picked.
`field.disabled_weekdays`	`number[]`	`—`	0 = Sunday … 6 = Saturday.

Events

Event	detail	Description
`baht-input`	`{ key, value }`	Fired on every user edit
`name`	CustomEvent