Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA date field with plus or minus one to three days of flexibility that lists the candidate dates and highlights the cheapest when prices are known. Use this when a traveller can move a trip by a few days to save money and wants to see the dates it covers.
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 a traveller can move a trip by a few days to save money and wants to see the dates it covers.
Do not use it for a fixed date; use date-field.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
| value / onValueChange | { date: string | null; flex: 0 | 1 | 2 | 3 } | - | Date and flexibility in days. |
| prices | Record<string, number> | - | Price by ISO date; the cheapest candidate is marked. |
| currency | string | USD | Currency of the prices. |
radiogroup semantics from Radix); the list of dates is a labelled list and the cheapest has the text "cheapest", not only a colour.The pattern ships with a Testing Library test (flexible-dates-window.test.tsx) that covers the candidate window, the cheapest date and changing the flexibility.