Date Picker — cinder playground

Overview

Controlled date/date-time picker that combines a text field, calendar trigger button, floating calendar, and optional time controls.

DatePicker owns the picker UI (decision B): it uses a text input and Cinder's Calendar as the single calendar surface. This avoids combining a browser-native date picker with the custom floating calendar. The text input keeps its label, description, and error semantics; a separate button owns the dialog trigger semantics. DatePicker handles parsing and keyboard input.

Usage

<script lang="ts">
  import { DatePicker } from '@lostgradient/cinder/date-picker';

  let value = $state<string | undefined>('2026-06-29');
</script>

<DatePicker id="event-date" bind:value label="Event date" />

Live preview

When to use

Use when

Collecting a date with consistent cross-browser UI and keyboard support.
Collecting local datetime values while keeping ISO strings as the controlled model.

Avoid when

Browser-native date controls are acceptable and custom styling is unnecessary.

Examples

Basic date picker

Single-date picker with a custom calendar popover.

Date-time picker

Calendar selection plus time input for minute-level granularity.

Props

Props for date-picker
Name	Type	Default	Description
`id` required	`text`		Stable id for label/input/error wiring.
`value` bindable	`text`		Controlled value as local ISO string. Bindable.
`label`	`text`		Field label text.
`placeholder`	`text`	`'YYYY-MM-DD'`	Placeholder shown when empty.
`granularity`	`'day' \| 'hour' \| 'minute' \| 'second'`	`'day'`	Date-time precision. Defaults to day.
`min`	`text`		Minimum allowed value (same format as `value`).
`max`	`text`		Maximum allowed value (same format as `value`).
`description`	`text`		Optional helper text.
`error`	`text`		Optional validation error text.
`disabled`	`boolean`	`false`	Disable interaction.
`onValueChange`	`(value: string \| undefined) => void`		Called when the value changes.