Date Range Picker

Preview

About

There's no separate KasyDateRangePicker widget: "DateRangePicker" is just KasyDatePicker (kasy_date_picker.dart) used with selectionMode: KasyDateSelectionMode.range. All the range logic (two taps for start/end) already lives in KasyDatePicker/KasyCalendar — this is just the usage mode.

KasyDatePicker(
  label: 'Trip dates',
  placeholder: 'Select a range',
  selectionMode: KasyDateSelectionMode.range,
  range: _range,
  onRangeChanged: (KasyDateRange r) => setState(() => _range = r),
)

• range (KasyDateRange): a start/end pair; either can be null while the user is still picking.
• onRangeChanged: fires twice — first with just start (after the first tap), then with both ends set (after the second tap, closing the overlay).
• minDate / maxDate, presentation, dateFormat/formatDate, locale, monthsToShow, variant: same props as KasyDatePicker — see the Date Picker page.
• In the field, the displayed text shows "start - end" once complete, or "start - ..." while the second end hasn't been picked yet.

Last updated on 08/23/2026