Date Picker

Import the component and bind a string. Click the field to open the calendar.

<script>
  import { DatePicker } from "theui-svelte";
  let date = $state("")
</script>

<DatePicker bind:value={date} placeholder="Pick a date">Birthday</DatePicker>

Use min and max, both ISO dates, to fence the calendar in. For anything else, disabledDates is asked about each day and returns true for the ones to turn off, such as weekends or days that are already taken.

<DatePicker
  bind:value={meeting}
  min="2026-01-01"
  max="2026-12-31"
  disabledDates={(date) => date.getDay() === 5 || date.getDay() === 6}
>Meeting day</DatePicker>

The locale prop decides the language of the month and weekday names and how the value is shown, and firstDayOfWeek sets which day starts the week, where 0 is Sunday and 1 is Monday. Both use the browser's own date formatting, so nothing extra is loaded.

<DatePicker value="2026-03-14" locale="en-GB" firstDayOfWeek={1} />
<DatePicker value="2026-03-14" locale="de-DE" firstDayOfWeek={1} />
<DatePicker value="2026-03-14" locale="bn-BD" />

By default the date is shown in a medium style for the locale. Pass format to write it your own way. The value itself never changes, only what is read in the field.

<DatePicker value="2026-03-14" />
<DatePicker value="2026-03-14" format={(d) => d.toLocaleDateString("en-US", {dateStyle: "full"})} />
<DatePicker value="2026-03-14" format={(d) => `${d.getDate()}/${d.getMonth() + 1}/${d.getFullYear()}`} />

The field is read-only by default, so a tap opens the calendar. Add editable to let the date be typed as well. Typing takes the ISO form, YYYY-MM-DD, and anything else is put back when the field loses focus.

<DatePicker bind:value={date} editable placeholder="YYYY-MM-DD">Typed date</DatePicker>

With inline the calendar is always open and there is no field, which suits a booking page or a filter panel.

<DatePicker bind:value={date} inline>Choose a day</DatePicker>

The calendar has a Today button and, once a date is chosen, a Clear button. Turn the first off with showToday=false and the second with clearable=false, or rename them with todayText and clearText.

<DatePicker value="2026-03-14" todayText="Jump to today" clearText="Remove" />
<DatePicker value="2026-03-14" showToday={false} clearable={false} />

Give the component a name and the ISO value is submitted, which is the form every backend understands. The onchange callback runs with the new value.

<form method="POST">
  <DatePicker name="startDate" value="2026-03-14" onchange={(v) => console.log(v)}>
    Start date
  </DatePicker>
  <button>Save</button>
</form>

The animationSpeed prop sets how quickly the field and the calendar react to focus, hover and opening. It takes "none", "slower", "slow", "normal", "fast" and "faster", and the default is "normal". Inside a Form or a Fieldset the value is inherited, so one setting covers every field at once.

<DatePicker animationSpeed="slower" placeholder="Slower" />
<DatePicker animationSpeed="normal" placeholder="Normal" />
<DatePicker animationSpeed="faster" placeholder="Faster" />
<DatePicker animationSpeed="none" placeholder="No animation" />

Set reset to true to drop the border, background and focus ring of the field and keep only the classes you pass. The calendar panel keeps its own styling, so only the closed field changes. The default is false, and a Form or a Fieldset can set it for every field it holds.

<DatePicker
  reset
  class="w-full border-b-2 border-gray-400 px-1 py-2"
  placeholder="Underline only" />

Sizes and variants come from the Form or the Fieldset, or from the props here. Use panelClass for the calendar, dayClasses for every day and selectedDayClasses for the chosen one.

<DatePicker value="2026-03-14" size="lg" variant="flat" />
<DatePicker value="2026-03-14" selectedDayClasses="bg-info-500 hover:bg-info-600" />
<DatePicker value="2026-03-14" dayClasses="rounded-lg" />

In the field, the down arrow or Enter opens the calendar. Inside it, the arrow keys move a day at a time, Page Up and Page Down move a month, with Shift a year, Home and End go to the start and end of the week, Enter or Space takes the day, and Escape closes and puts the focus back on the field. Only one day is in the tab order at a time, so Tab leaves the calendar instead of walking through forty-two buttons.

The calendar is a dialog with a grid inside it, the pattern screen readers know. Each day is a button named in full, such as "Saturday, 14 March 2026", so the number is never read alone; today is marked with aria-current and the chosen day with aria-selected. The month in view is announced politely as it changes, and days outside the range are disabled rather than hidden. The month and year button opens a list of years and months, so a distant date takes a few clicks instead of many. The panel is positioned with a fixed strategy, so it stays on screen inside scrolling boxes.