Flight Round Trip Dates

ProNew

Two typed date fields for departing and returning with a one-way switch, a return date that moves forward with the departure and a trip length summary. Use this when a traveller enters flight dates and the return must never be before the departure.

Customize

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.

defaultOneWay

min / max

Guide and examples

When to use it

Use it when a traveller enters flight dates and the return must never be before the departure.

Do not use it for hotel stays, where nights and sold-out days matter; use hotel-stay-dates.

Installation

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.

Props

Prop	Type	Default	Description
value / defaultValue	`{ depart: string \| null; ret: string \| null }`	empty	ISO dates; `ret` is null for one way.
onValueChange	`(trip) => void`	-	Called on every change.
defaultOneWay	boolean	false	Start as one way.
min / max	string	today / +1 year	Selectable window.

Accessibility

Both fields are named groups of spinbuttons (Departure date, Return date).
Switching to one way removes the return field from the page instead of only hiding it, so it leaves the tab order.

Testing

The pattern ships with a Testing Library test (flight-round-trip-dates.test.tsx) that covers moving the return date with the departure, one way, and the trip length.

Guide and examples

When to use it

Use it when a traveller enters flight dates and the return must never be before the departure.

Do not use it for hotel stays, where nights and sold-out days matter; use hotel-stay-dates.

Installation

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.

Props

Prop	Type	Default	Description
value / defaultValue	`{ depart: string \| null; ret: string \| null }`	empty	ISO dates; `ret` is null for one way.
onValueChange	`(trip) => void`	-	Called on every change.
defaultOneWay	boolean	false	Start as one way.
min / max	string	today / +1 year	Selectable window.

Accessibility

Both fields are named groups of spinbuttons (Departure date, Return date).
Switching to one way removes the return field from the page instead of only hiding it, so it leaves the tab order.

Testing

The pattern ships with a Testing Library test (flight-round-trip-dates.test.tsx) that covers moving the return date with the departure, one way, and the trip length.