Forms · astro-ui · DatePickerNew

DatePickerJS

Native date input with a Gregorian or Persian calendar panel.

DatePicker wraps a real <input type="date">, so the field submits with the form, validates natively, and opens the platform picker on mobile with no JavaScript at all. The calendar panel is the enhancement: a month grid whose month names, weekday order, and digits come from Intl.DateTimeFormat, which is what makes a Persian (Jalali) calendar possible without shipping a calendar library.

← All components

Features

Native `<input type="date">` baseline — works with zero JS
Gregorian and Persian (Jalali) month grids from `Intl`
Locale-driven month, weekday, and digit rendering
Full keyboard model: arrows, Home/End, PageUp/PageDown, Escape
RTL-aware: arrow keys follow the page's writing direction
`min` / `max` bounds disable out-of-range days
Today and Clear actions in the panel footer
Picking a day dispatches native `input` + `change` events

Usage

---
import { DatePicker, Label } from "astro-ui";
---

<Label for="start-input">Start date</Label>
<DatePicker
  id="start"
  name="start"
  calendar="persian"
  locale="fa-IR"
  min="2026-01-01"
/>

Demos

Gregorian date

Start date

<Label for="dp-start-input">Start date</Label>
<DatePicker id="dp-start" name="start"/>

<script>
  document
    .querySelector("#dp-start-input")
    ?.addEventListener("change", (event) => {
      console.log(event.target.value); // "2026-10-20"
    });
</script>

Type a date, or press the calendar button to open the grid.

Persian (Jalali) calendar

تاریخ شروع

<Label for="dp-jalali-input">تاریخ شروع</Label>
<DatePicker
  id="dp-jalali"
  name="start"
  calendar="persian"
  locale="fa-IR"
  value="2026-10-20"
/>

Bounded to a booking window

Visit date

<Label for="dp-bounded-input">Visit date</Label>
<DatePicker
  id="dp-bounded"
  name="visit"
  min="2026-10-20"
  max="2026-11-20"
/>

API

Props

Prop	Type	Default	Description
`name`	`string`	`—`	Form field name.
`value`	`string`	`—`	Initial ISO date (`YYYY-MM-DD`).
`min`	`string`	`—`	Earliest selectable ISO date.
`max`	`string`	`—`	Latest selectable ISO date.
`calendar`	`"gregory" \| "persian"`	`"gregory"`	Calendar system for the panel.
`locale`	`string`	`"en-US" \| "fa-IR"`	BCP-47 locale for names and digits.
`firstDayOfWeek`	`number`	`0 \| 6`	0 = Sunday … 6 = Saturday.
`ariaLabel`	`string`	`—`	Accessible name when there is no visible label.
`toggleLabel`	`string`	`"Open calendar"`	Accessible name for the calendar button.
`panelLabel`	`string`	`"Choose date"`	Accessible name for the panel.
`required`	`boolean`	`false`	Required field.
`disabled`	`boolean`	`false`	Disabled field.
`class`	`string`	`—`	Merged via cn(); Tailwind classes welcome.
`id`	`string`	`—`	Wrapper id; the input becomes `<id>-input`.

Accessibility

Implemented accessibility features — semantics, ARIA wiring, and keyboard behavior that ship with the component.

FAQ

How do I read the chosen date?

Listen for `change` (or `input`) on `#<id>-input`, or read the form value by `name`. The panel writes the ISO date into that input and dispatches native events, so the component never invents its own event system.

Is the Jalali calendar accurate?

The grid is derived from `Intl.DateTimeFormat` with `calendar: "persian"`, so month boundaries, lengths, and leap years follow the platform's ICU data — the same data your users' browsers use for `toLocaleDateString`.

Does it work without JavaScript?

Yes. The native date input is the control; the panel is additive. If the script never runs, users still pick a date with the platform picker.

Are range pickers supported?

Not yet — there is no two-input range state machine. For now, pair two DatePickers (`min` on the second bound to the first value) and validate on submit.

Changelog

Version history mentioning DatePicker.

v0.1.0 — 2026-11-11

added

Forms (18): Autocomplete, Combobox, Label, Field, Input, InputGroup, Textarea, Select, Checkbox, Radio, Switch, Toggle, ToggleGroup, RadioGroup, Rating, Slider, DatePicker, TimePicker.