Fieldbook
Sign in

Inputs

Date Range Picker

A single month calendar for choosing a start and end date, where every day between them fills in as one continuous highlighted band once both ends are picked.

Using Date Range Picker

A single month calendar for choosing a start and end date, where every day between them fills in as one continuous highlighted band once both ends are picked.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: accent, startMonth, startYear

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The preview and component description are public. Sign in with an authorized account to open the code, framework versions and installation panel.

Connect your agent

Nearby

Date Range Picker
2794Date Range PickerInputsA month calendar grid for picking a start and end date together, with the days between them shown as one connected span.
Localized booking calendar
2185Localized booking calendarInputsA two month range picker inside a card whose title, subtitle, and month names switch between two languages from a small select menu in the header.
Priced stay range calendar
2406Priced stay range calendarInputsA range calendar where every day cell shows a small price under its number, weekends priced higher than weekdays, with month and year chosen from dropdowns.
Stay Dates Picker
2442Stay Dates PickerInputsA booking-style pair of fields, Check-in and Check-out, each opening its own dropdown calendar next to a fixed time box, for choosing a two-ended stay.
Stay range popover picker
2443Stay range popover pickerInputsA trigger button that shows two dates joined by a hyphen and opens a floating range calendar for picking a start and end day, for a hotel-style stay selection.
Two-Month Range Picker
2261Two-Month Range PickerInputsA date range picker that shows two consecutive months at once, so a range spanning a month boundary stays fully visible while it is being chosen.