Date Field
A date input: a field that shows the date in the page's language and opens a Calendar to change it — anchored under the field on a desktop, in a bottom sheet on a phone, where a popover would be a thumb's width from the edge.
Walkthrough
1. Basic
A field that opens a calendar — under the field on a desktop, in a bottom sheet on a phone. The value is a Date at local midnight, or null.
<script lang="ts"> import { DateField } from 'omaris'; let due = $state<Date | null>(null);</script><DateField class="w-64 max-w-full" label="Due date" bind:value={due} />2. States
The same frame, sizes and states as a text field, so a form that mixes the two validates as one thing. min, max and isDateDisabled grey days out in the calendar rather than rejecting them after the fact.
Weekdays, next 30 days
Pick a start date.
<script lang="ts"> import { DateField, addDays, startOfDay } from 'omaris'; const today = startOfDay(new Date()); const weekend = (date: Date) => date.getDay() === 0 || date.getDay() === 6;</script><DateField class="w-56 max-w-full" variant="filled" label="Delivery" min={today} max={addDays(today, 30)} isDateDisabled={weekend} supportingText="Weekdays, next 30 days"/><DateField class="w-56 max-w-full" label="Start date" required invalid supportingText="Pick a start date."/><DateField class="w-56 max-w-full" label="Signed" disabled value={today} />3. Format and locale
format is Intl.DateTimeFormat options for the text in the field, and locale decides the names and the first weekday. Western digits either way.
<script lang="ts"> import { DateField } from 'omaris'; let meeting = $state<Date | null>(new Date(2026, 2, 12)); let arabic = $state<Date | null>(new Date(2026, 2, 12));</script><DateField class="w-64 max-w-full" label="Meeting" format={{ weekday: 'long', day: 'numeric', month: 'long' }} bind:value={meeting}/><div class="w-64 max-w-full" dir="rtl" lang="ar-IQ"> <DateField label="الموعد" locale="ar-IQ" placeholder="اختر تاريخًا" format={{ dateStyle: 'long' }} bind:value={arabic} /></div>4. Overridden
classes reaches the frame's parts and calendarClasses the calendar's. A name posts the date as YYYY-MM-DD, so the field works in a plain form.
<script lang="ts"> import { DateField } from 'omaris';</script><form class="w-48 max-w-full"> <DateField label="Invoice date" name="invoice-date" size="sm" format={{ year: 'numeric', month: '2-digit', day: '2-digit' }} value={new Date(2026, 2, 12)} classes={{ field: 'rounded-full', value: 'font-mono', icon: 'text-primary' }} calendarClasses={{ face: 'rounded-shape-sm' }} /></form>