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 a week in the Flutter Date Range Picker (SfDateRangePicker)

Platform: Flutter |
Control: SfDateRangePicker |
Published Date: April 15, 2020 |
Last Revised Date: April 22, 2021

In the Flutter Date Range Picker, you can select the entire week when selecting a single day using the `onSelectionChanged` callback and `enableSwipeSelection` property.

Step 1:

Inside the state, initialize the controller for date range picker.

final DateRangePickerController _controller = DateRangePickerController();

 

Step 2:

Place the date range picker inside the body of the Scaffold widget, set the `selectionMode` as range selection and trigger the `onSelectionChanged` callback of the flutter date picker.

return Scaffold(
  body: Column(
    children: <Widget>[
      Card(
        margin: const EdgeInsets.fromLTRB(50, 100, 50, 100),
        child: SfDateRangePicker(
          controller: _controller,
          view: DateRangePickerView.month,
          selectionMode: DateRangePickerSelectionMode.range,
          onSelectionChanged: selectionChanged,
          monthViewSettings: DateRangePickerMonthViewSettings(enableSwipeSelection: false),
        ),
      )
    ],
  ), 
);

 

Step 3:

Find the `startDate` and `endDate` from the `onSelectionChanged` event args. Calculate the first day of the week for `startDate`, `endDate`, and add the remaining dates to the start and end dates for the week selection. And assign those dates to the `selectedRange` property of controller. Please find the code for the same.

void selectionChanged(DateRangePickerSelectionChangedArgs args) {
  int firstDayOfWeek = DateTime.sunday % 7;
  int endDayOfWeek = (firstDayOfWeek - 1) % 7;
  endDayOfWeek = endDayOfWeek < 0? 7 + endDayOfWeek : endDayOfWeek;
  PickerDateRange ranges = args.value;
  DateTime date1 = ranges.startDate!;
  DateTime date2 = (ranges.endDate?? ranges.startDate)!;
  if(date1.isAfter(date2))
    {
      var date=date1;
      date1=date2;
      date2=date;
    }
  int day1 = date1.weekday % 7;
  int day2 = date2.weekday % 7;
 
  DateTime dat1 = date1.add(Duration(days: (firstDayOfWeek - day1)));
  DateTime dat2 = date2.add(Duration(days: (endDayOfWeek - day2)));
 
  if( !isSameDate(dat1, ranges.startDate)|| !isSameDate(dat2,ranges.endDate))
  {
    _controller.selectedRange = PickerDateRange(dat1, dat2);
  }
}

 

View sample in Github.

 


week selection

 

 

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