Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA date input that uses the phone's native date picker on touch devices and the segmented date field with a calendar on desktop, with one ISO value. Use this when the same form runs on phones and desktops and each should get the date control it is best at.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it when the same form runs on phones and desktops and each should get the date control it is best at.
Do not use it when you need one identical control everywhere; use date-field.
It composes date-field and date-time-core, which the CLI installs for you.
import { AdaptiveDateInput } from "@/components/adaptive-date-input"<AdaptiveDateInput min="2026-10-25" onValueChange={(date) => setDate(date)} />| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue / onValueChange | string | null | null | ISO date. |
| min / max | string | - | Limits for both controls. |
| forceNative | boolean | - | Override detection (true: native, false: segmented). |
| label | string | Date | Accessible name. |
input type="date" gives the platform's own accessible picker; elsewhere the segmented field applies. Both carry the same name and limits.The pattern ships with a Testing Library test (adaptive-date-input.test.tsx) that covers choosing the control by pointer type, the shared value and the override.