We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to select previous or next dates based on the selected date in the Flutter Date Range Picker (SfDateRangePicker)

Platform: Flutter |
Control: SfDateRangePicker |
Published Date: February 11, 2021 |
Last Revised Date: April 22, 2021

In the Flutter Date Range Picker, you can highlight the before and after date ranges of the selected date by using onSelectionChanged callback of the Flutter date range picker.

Inside the state, set the default values for date range picker.

final DateRangePickerController _controller = DateRangePickerController();

Using the onSelectionChanged callback find the startDate of the selected range and add previous and next dates of selected dates.

void selectionChanged(DateRangePickerSelectionChangedArgs args) {
  final List<PickerDateRange> dateRanges = (args.value as List<PickerDateRange>);
  final DateTime? date = dateRanges.isNotEmpty ? dateRanges[dateRanges.length - 1].startDate! : null;
 
  if (date != null && _controller.selectedRanges != null && dateRanges[dateRanges.length - 1].endDate == null) {
    _controller.selectedRanges  = <PickerDateRange>[
      PickerDateRange(date.add(Duration(days: -3)),
          date.add(Duration(days: -1))),
      PickerDateRange(date.add(Duration(days: 1)),
          date.add(Duration(days: 3)))
    ];
  }
}

Set the selection mode as multirange and assign _controller value to the controller property of the picker.

child: SfDateRangePicker(
  view: DateRangePickerView.month,
  controller: _controller,
  monthViewSettings: DateRangePickerMonthViewSettings(
      enableSwipeSelection: false),
  selectionMode: DateRangePickerSelectionMode.multiRange,
  onSelectionChanged:selectionChanged
))

View sample in GitHub

Selectedrange gif

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile