My Profile
Sign Out
Tickets
Knowledge Base
Login
Articles in this section
Category / Section
  2. Flutter
  3. SfDateRangePicker

How to select a week in the Flutter Date Range Picker (SfDateRangePicker)

1 min read

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

 

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Did not find the solution Contact Support
Comments (1)
Please  to leave a comment
JT
James Tang

I want the select value to start on a Monday and come to the end of the week on a Sunday. What do I need to change?
JT
James Tang

For example I want Monday 2nd to Sunday 8th instead of Sunday 1st to Saturday 7th in the screenshot above.
MS
Muniappan Subramanian

We checked the information you provided, and we met your requirements. Please use the code snippets below to achieve your requirement.

void selectionChanged(DateRangePickerSelectionChangedArgs args) {
  int firstDayOfWeek = DateTime.monday % 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;
  if(day2 == 0) {
    day2 = 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);
  }
}

You can customize the first day of the week in the date range picker by using the FirstDayofWeek property from the MonthViewSettings, Refer to our UG documentation about FirstDayofWeek, https://help.syncfusion.com/flutter/daterangepicker/getting-started#change-first-day-of-week

HS
Hemang Sidapara

I optimize a code and show perfect range:)

void selectionChanged(DateRangePickerSelectionChangedArgs args) {
    int firstDayOfWeek = DateTime.monday % 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;
    if(day2 == 0){
      day2 = 7;
    }

    if (date1.weekday % 7 == 0 && date2.weekday % 7 == 0) {
      day1 = 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);
    }
  }

  bool isSameDate(DateTime? date1, DateTime? date2) {
    if (date2 == date1) {
      return true;
    }
    if (date1 == null || date2 == null) {
      return false;
    }
    return date1.month == date2.month && date1.year == date2.year && date1.day == date2.day;
  }
Access denied
Access denied