DateInput

A text-like date control with a private Calendar popover and Temporal.PlainDate binding.

Usage

Use standalone; it owns a private Calendar for date selection and can later be coordinated by DateField.

Svelte

<DateInput {...props} />

Anatomy

The class attribute values represent part names, and conditional indicates elements that are rendered conditionally. Other attributes represent their corresponding props.

Svelte

<span class="whole" data-* style>
  <span class="left" conditional>{left}</span>
  <input class="main" type="text" role="combobox" aria-* {...rest} />
  <span class="right" conditional>{right}</span>
  <input type="hidden" conditional />
  <div class="bottom" conditional>{#if children}{children}{:else}<Calendar />{/if}</div>
</span>

Props

Name	Type	Default	Description
`value`	`Temporal.PlainDate`	-	Bindable selected date; undefined means empty
`open`	`boolean`	`false`	Bindable private calendar popover open state
`min`	`Temporal.PlainDate`	-	Minimum allowed date
`max`	`Temporal.PlainDate`	-	Maximum allowed date
`isDisabled`	`function`	-	Disables dates matching a custom predicate
`parse`	`function`	-	Caller-coordinated text parser; enables typed value entry
`format`	`function`	-	Caller-coordinated display formatter
`locale`	`string`	-	Locale used by the default formatter and private calendar
`name`	`string`	-	Emits a hidden input with the ISO date string
`openOnFocus`	`boolean`	`true`	Opens the popover when the input receives focus
`closeOnSelect`	`boolean`	`true`	Closes the popover after a date is selected
`left`	`Snippet`	-	Content before the input; receives control helpers, open state, and variant
`right`	`Snippet`	-	Content after the input; receives control helpers, open state, and variant
`transition`	`TransitionProp`	-	Optional transition function and params for the popover
`children`	`Snippet`	-	Declarative `Calendar` child; self-wires value/min/max/isDisabled/variant and wins over `calendar`
`calendar`	`Omit`	-	Nested config bag spread into the private `Calendar`
`cssvar`	`object`	-	Custom-property names for the overlay x/y offsets and z-index; absent key uses the default name
`attach`	`Attachment`	-	Svelte attachment on the input
`element`	`HTMLInputElement`	-	Bindable input element
`styling`	`SVSClass`	-	Styling override
`variant`	`SVSVariant`	`NEUTRAL`	Variant

Other HTMLInputAttributes are passed to <input> via rest props; class is merged onto the root.

Styling

To learn more, see Styling.

Variant Management

No automatic switching.

Default Class Name

svs-date-input

Behavior

Without parse, the visible control is readonly and the private calendar is the only value entry path.
With parse, draft text commits on change or blur; invalid, disabled, and out-of-range dates revert.
With parse, opening keeps focus in the input for typing; press ArrowDown to move focus into the calendar. Without parse, opening moves focus into the calendar.
A declarative Calendar child self-wires value, min, max, isDisabled, and variant through context and wins over the calendar bag.
name is assigned only to a hidden input whose value is ISO (Temporal.PlainDate.toString()), not the locale-formatted control.
format and parse are caller-coordinated; the default locale display is not necessarily parseable by a supplied parser.
The whole wrapper is position:relative;display:inline-block; because the overlay anchors against it; a caller overriding its display owns the resulting anchor geometry.
The overlay defaults below/left, flips per axis above/right on viewport overflow, exposes data-svs-flip-x / data-svs-flip-y on flipped axes, and reads its offsets from cssvar x/y custom properties (defaults --svs-position-x / --svs-position-y).
The overlay carries z-index: var(--svs-position-z, 1) so it paints above adjacent positioned content (e.g. a following DateInput's relatively-positioned root). Override it from caller CSS or rename it via the cssvar z key to fit a caller's own stacking order.

Accessibility

Keyboard Interactions

Key	Description
`Escape`	Closes the open date-picker overlay and returns focus to the input

When parse is provided, typing edits the date text. openOnFocus opens the overlay when the input receives focus. For date navigation inside the open picker, see Calendar.

ARIA Roles and Attributes

The component applies these automatically:

Input (main): role="combobox", aria-haspopup="dialog", aria-expanded, aria-controls while the overlay is open, aria-describedby, aria-invalid, and aria-errormessage.
Overlay (bottom): its id is referenced by aria-controls while open and it contains the private Calendar.

Provide an accessible name yourself because there is no built-in visible label. Pass aria-label or aria-labelledby through the rest props, or associate a <label> with the input. The component manages the ARIA attributes listed above for its own state and validation wiring.

Exports

Types

TypeScript

type TransitionProp = {
  fn?: (node: HTMLElement, params: any, options: { direction: "in" | "out" | "both" }) => import("svelte/transition").TransitionConfig;
  params?: unknown;
};
type DateInputCtl = {
  toggle: () => void;
  show: () => void;
  hide: () => void;
  clear: () => void;
};
interface DateInputProps extends Omit<HTMLInputAttributes, "type" | "value" | "min" | "max" | "readonly" | "list" | "name"> {
  value?: Temporal.PlainDate; // bindable; undefined = empty
  open?: boolean; // bindable (false)
  min?: Temporal.PlainDate;
  max?: Temporal.PlainDate;
  isDisabled?: (d: Temporal.PlainDate) => boolean;
  parse?: (text: string) => Temporal.PlainDate | undefined;
  format?: (d: Temporal.PlainDate) => string;
  locale?: string;
  name?: string;
  openOnFocus?: boolean; // (true)
  closeOnSelect?: boolean; // (true)
  left?: Snippet<[DateInputCtl, boolean, string]>;
  right?: Snippet<[DateInputCtl, boolean, string]>;
  transition?: TransitionProp;
  children?: Snippet;
  calendar?: Omit<CalendarProps, "value" | "display" | "min" | "max" | "isDisabled" | "variant">;
  cssvar?: Partial<Record<DateInputCssVar, string>>; // custom-property names for the overlay x/y offsets and z-index; absent key uses default name
  attach?: Attachment<HTMLInputElement>;
  element?: HTMLInputElement; // bindable
  styling?: SVSClass;
  variant?: SVSVariant; // (VARIANT.NEUTRAL)
}
type DateInputReqdProps = never;
type DateInputBindProps = "value" | "open" | "element";
type DateInputCssVar = "x" | "y" | "z";

Others

No additional exports are available.

Examples

The example code uses Tailwind CSS along with SVSClass.

Basic

Svelte

<script lang="ts">
  import { DateInput } from "svseeds";

  let value = $state<Temporal.PlainDate>();

  const pickerStyle = {
    whole: "relative flex justify-center items-center rounded-md bg-white dark:bg-black",
    left: "absolute inset-y-0 inset-x-1 my-auto h-7 rounded-md opacity-30 bg-black dark:bg-white pointer-events-none",
  };
  const yearStyle = {
    whole: "w-20 h-30 overflow-hidden rounded-md",
    middle: "h-full",
    label: {
      base: "flex h-8 items-center justify-end",
      active: "font-bold",
    },
    aux: "hidden",
    extra: "inset-0 bg-linear-to-b from-white via-transparent to-white dark:from-black dark:to-black",
  };
  const monthStyle = {
    ...yearStyle,
    label: {
      base: "flex ps-4 h-8 items-center justify-start",
      active: "font-bold",
    },
  };
  const pickerProps = {
    styling: pickerStyle,
    left: preserve,
    yearLabel: (y: number) => String(y),
    monthLabel: (m: number) => String(m).padStart(2, "0"),
    year: { styling: yearStyle },
    month: { styling: monthStyle },
  };
  const calendarStyle = {
    whole: "w-full bg-white dark:bg-black",
    top: "mb-1 flex items-center gap-2",
    left: "px-1.5 py-0.5 rounded-md border text-sm cursor-pointer",
    label: "px-1 py-0.5 min-w-0 flex-1 cursor-pointer rounded-md border text-sm font-bold",
    right: "px-1.5 py-0.5 rounded-md border text-sm cursor-pointer",
    middle: "overflow-hidden",
    aux: "grid grid-cols-7 gap-1",
    main: "grid gap-1 outline-hidden select-none",
    extra: {
      base: "flex size-6 items-center justify-center rounded-md text-sm data-header:data-[weekday=0]:text-red-500 data-outside:text-gray-400 data-today:font-bold data-today:not-data-selected:bg-gray-400",
      active: "bg-teal-500 font-bold",
      inactive: "text-gray-400",
    },
  };
  const calendarProps = {
    left,
    right,
    outsideDays: true,
    monthPicker: pickerProps,
    styling: calendarStyle,
  };
  const styling = {
    whole: "flex! w-50 flex-col items-center rounded-sm border bg-white dark:bg-black",
    main: "px-3 py-2 w-full outline-hidden",
    bottom: "my-2 p-3 w-full rounded-sm border bg-white shadow-lg dark:bg-black",
  };
  const myProps = {
    placeholder: "Pick a date",
    openOnFocus: true,
    calendar: calendarProps,
    styling,
  };
</script>

<div class="flex flex-col items-center gap-3">
  <DateInput bind:value {...myProps} />
  <div class="text-sm">Selected: {value?.toString() ?? "Pick a day"}</div>
</div>
{#snippet preserve()}{/snippet}
{#snippet left()}{"<"}{/snippet}
{#snippet right()}{">"}{/snippet}

With Interactive Variant

Preset for Demo

Free Input

Enter variant as you like

Svelte

<script lang="ts">
  import { DateInput } from "svseeds";

  let { variant = $bindable() } = $props();
  let value = $state<Temporal.PlainDate>();
  const min = Temporal.Now.plainDateISO().with({ month: 1, day: 1 });
  const max = Temporal.Now.plainDateISO().with({ month: 12, day: 31 });
  const parse = (text: string) => {
    try {
      if (!text) return;
      return Temporal.PlainDate.from(new Date(text).toISOString().split("T")[0]);
    } catch {
      return undefined;
    }
  };

  const variantStyle = {
    neutral: "border-gray-400",
    active: "border-teal-500",
    inactive: "border-red-500",
    blue: "border-blue-500",
    yellow: "border-yellow-500",
    sky: "border-sky-500",
  };
  const pickerStyle = {
    whole: "relative flex justify-center items-center rounded-md bg-white dark:bg-black",
    left: "absolute inset-y-0 inset-x-1 my-auto h-7 rounded-md opacity-30 bg-black dark:bg-white pointer-events-none",
  };
  const yearStyle = {
    whole: "w-20 h-30 overflow-hidden rounded-md",
    middle: "h-full",
    label: {
      base: "flex h-8 items-center justify-end",
      active: "font-bold",
    },
    aux: "hidden",
    extra: "inset-0 bg-linear-to-b from-white via-transparent to-white dark:from-black dark:to-black",
  };
  const monthStyle = {
    ...yearStyle,
    label: {
      base: "flex ps-4 h-8 items-center justify-start",
      active: "font-bold",
    },
  };
  const pickerProps = {
    styling: pickerStyle,
    left: preserve,
    yearLabel: (y: number) => String(y),
    monthLabel: (m: number) => String(m).padStart(2, "0"),
    year: { styling: yearStyle },
    month: { styling: monthStyle },
  };
  const calendarStyle = {
    whole: "w-full bg-white dark:bg-black",
    top: "mb-1 flex items-center gap-2",
    left: "px-1.5 py-0.5 rounded-md border text-sm cursor-pointer",
    label: "px-1 py-0.5 min-w-0 flex-1 cursor-pointer rounded-md border text-sm font-bold",
    right: "px-1.5 py-0.5 rounded-md border text-sm cursor-pointer",
    middle: "overflow-hidden",
    aux: "grid grid-cols-7 gap-1",
    main: "grid gap-1 outline-hidden select-none",
    extra: {
      base: "flex size-6 items-center justify-center rounded-md text-sm data-header:data-[weekday=0]:text-red-500 data-outside:text-gray-400 data-today:font-bold data-today:not-data-selected:bg-gray-400",
      active: "bg-teal-500 font-bold",
      inactive: "text-gray-400",
    },
  };
  const calendarProps = {
    left,
    right,
    outsideDays: true,
    fixedWeeks: true,
    monthPicker: pickerProps,
    styling: calendarStyle,
  };
  const styling = {
    whole: {
      base: "flex! items-center rounded-sm border bg-white dark:bg-black",
      ...variantStyle,
    },
    main: "p-2 w-32 outline-hidden",
    right: "me-2",
    bottom: "my-2 p-3 rounded-sm border bg-white shadow-lg dark:bg-black",
  };
  const myProps = {
    min,
    max,
    parse,
    format: (d: Temporal.PlainDate) => d.toString(),
    placeholder: "YYYY-MM-DD",
    openOnFocus: true,
    calendar: calendarProps,
    styling,
  };
</script>

<div class="flex flex-col items-center gap-3">
  <DateInput bind:value {variant} {...myProps}>
    {#snippet right(ctl)}
      <button class="rounded-md border px-2 py-1 text-xs" type="button" onclick={ctl.clear}>Clear</button>
    {/snippet}
  </DateInput>
  <div class="text-sm">Selected: {value?.toString() ?? "Pick a day"}</div>
</div>
{#snippet preserve()}{/snippet}
{#snippet left()}{"<"}{/snippet}
{#snippet right()}{">"}{/snippet}