Cross-Field Date Range Form

ProNew

A start and end date pair that keeps the end on or after the start: the end input's minimum follows the start, an impossible range explains itself, and a maximum length can be enforced. Use this when two fields only make sense together.

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.

maxNights1

Guide and examples

When to use it

A pair of dates (booking, report period, leave request) has to be ordered, and you want the constraint visible in the control instead of discovered at submit.

Do not use it when: For picking a range visually, use a range calendar. This pattern is for typing and for native date pickers.

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	Description
`maxNights`	`number`	Longest allowed range; sets the end input's `max` and the validation.
`onSubmit`	`({ start, end, nights }) => void`	Called with a valid range.

Accessibility

The constraint lives in the control as well as the message: the end input's min and max follow the start, so the native date picker greys out impossible days.
The nights count is a polite status, so a screen reader hears "3 nights" after choosing the end date.
An impossible range produces an alert on the end field, linked to it, naming the rule.

Testing

The pattern ships with a Testing Library test (cross-field-date-range-form.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

A pair of dates (booking, report period, leave request) has to be ordered, and you want the constraint visible in the control instead of discovered at submit.

Do not use it when: For picking a range visually, use a range calendar. This pattern is for typing and for native date pickers.

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	Description
`maxNights`	`number`	Longest allowed range; sets the end input's `max` and the validation.
`onSubmit`	`({ start, end, nights }) => void`	Called with a valid range.

Accessibility

The constraint lives in the control as well as the message: the end input's min and max follow the start, so the native date picker greys out impossible days.
The nights count is a polite status, so a screen reader hears "3 nights" after choosing the end date.
An impossible range produces an alert on the end field, linked to it, naming the rule.

Testing

The pattern ships with a Testing Library test (cross-field-date-range-form.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.