# 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](/docs/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](/docs/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

```ts
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

**Code**

```svelte src=DateInputBasic.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

**Code**

```svelte src=DateInputPract.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}
```