Form fields·loomora/DateField
DateField
A feature-packed date/time picker that supports 6 distinct modes: date, datetime, time, dateRange, timeRange, and dateTimeRange. Includes responsive dual-month calendars on desktop and single-month on mobile, quick presets, decade jumps, time spinners, and full Loomora i18n localization.
Interactive live playground
Tweak props, change states, and see the live component respond in real time.
How to call
Import directly from the Loomora package root. For projects without Tailwind CSS, ensure loomora/dist/index.css is imported once in your root layout.
import { DateField } from 'loomora'
<DateField label="Appointment date" properties={{ mode: 'datetime', value, onChange: setValue }} />API reference
Important public props and how they affect rendering.
| Prop | Type | Default | Description |
|---|---|---|---|
| properties.mode | 'date' | 'datetime' | 'time' | 'dateRange' | 'timeRange' | 'dateTimeRange' | 'date' | Operational mode of the picker. |
| properties.value / onChange | Date | string | [Date, Date] | null | — | Controlled picker value and change callback. |
| properties.minDate / maxDate | Date | string | — | Restricts the selectable date range. |
| properties.hour12 | boolean | config default (true) | Toggles 12-hour AM/PM format versus 24-hour. |
| properties.showSeconds | boolean | false | Shows the seconds column in time pickers. |
| properties.allowClear | boolean | true | Shows an inline clear button when a value is selected. |
| properties.showPresets | boolean | true | Enables quick preset shortcuts (Today, Yesterday, Last 7 days, etc.). |
| properties.disabledDates | (date: Date) => boolean | — | Custom function to disable specific dates (e.g. holidays). |