Limit maximum date range

[Jaehwi Kim]

Hi, 

I'm working with SfDateRangerPicker.

I'm currently implementing a DateRangePicker that allows user to select range of dates and show graph based on the selected dates. I many graphs that would show data depending on the selected date range, and since there are no limit to how many dates the user can put in the range, allowing selection of long range of dates result in performance issues. For this issue, I would like put a limit of 31 days of maximum date range for the DateRangePicker, and notify the user if he/she selects more than 31days (and select maximum 31 days from the start date after notifying the user with - eg. popup). Is there an example or functionality for this?

Thank you.

[Indumathi Ravichandran]

Hi jaewhi, 

 

Thank you for contacting Syncfusion support. 

 

Regarding Query: (select maximum 31 days from the start date after notifying the user with - eg. popup). Is there an example or functionality for this?  

 

Yes, it is possible to popup when selected range exceeds the specified count by calculating the difference between startDate and endDate of the selected range. We have attached the code snippet for the same. 

 

Code snippet: 

 

child: SfDateRangePicker(
  onSelectionChanged: selectionChanged,
  selectionMode: DateRangePickerSelectionMode.range,
  monthViewSettings: DateRangePickerMonthViewSettings(
      showTrailingAndLeadingDates: true),
)), 

 

void selectionChanged(DateRangePickerSelectionChangedArgs args) {
  if (args.value is PickerDateRange) {
    DateTime start = args.value.startDate;
    DateTime end = args.value.endDate;
    int difference = end.difference(start).inDays;
    if (difference > 31) {
      _showDialog();
    }
  }
}

void _showDialog() {
  showDialog(
    builder: (context) => new AlertDialog(
      title: Container(
        child: Text("Selected range exceeds 31"),
      ),
      contentPadding: const EdgeInsets.all(16.0),
      actions: <Widget>[
        new TextButton(
            child: const Text('OK'),
            onPressed: () {
              Navigator.pop(context);
            })
      ],
    ),
    context: context,
  );
}

 

Screenshot: 

 

 

 

Also, we have a property minDate and maxDate for date restriction. Please find the UG document from the following link. 

 

UG link: 

https://help.syncfusion.com/flutter/daterangepicker/date-restrictions 

 

We hope that this helps you. Please let us know if you need further assistance. 

 

Regards, 

Indumathi R