controller property

DateRangePickerController? controller

An object that used for programmatic date navigation, date and range selection and view switching in SfDateRangePicker.

A DateRangePickerController served for several purposes. It can be used to selected dates and ranges programmatically on SfDateRangePicker by using thecontroller.selectedDate, controller.selectedDates, controller.selectedRange, controller.selectedRanges. It can be used to change the SfDateRangePicker view by using the controller.view property. It can be used to navigate to specific date by using the controller.displayDate property.

Listening to property changes:

The DateRangePickerController is a listenable. It notifies it's listeners whenever any of attached SfDateRangePicker`s selected date, display date and view changed (i.e: selecting a different date, swiping to next/previous view and navigates to different view] in in SfDateRangePicker.

Navigates to different view:

The SfDateRangePicker visible view can be changed by using the Controller.view property, the property allow to change the view of SfDateRangePicker programmatically on initial load and in run time.

Programmatic selection:

In SfDateRangePicker selecting dates programmatically can be achieved by using the controller.selectedDate, controller.selectedDates, controller.selectedRange, controller.selectedRanges which allows to select the dates or ranges programmatically on SfDateRangePicker on initial load and in run time.

Defaults to null.

See also:

• DateRangePickerController, to know more about the controller and it's usage with the date range picker.
• initialDisplayDate, which used to navigate the date range picker to the specific date initially.
• initialSelectedDate, which allows to select date programmatically initially on date range picker.
• initialSelectedDates, which allows to list of select date programmatically initially on date range picker.
• initialSelectedRange, which allows to select a range of dates programmatically initially on date range picker.
• initialSelectedRanges, which allows to select a ranges of dates programmatically initially on date range picker.
• DateRangePickerController.selectedDate,which allows to select date programmatically dynamically on date range picker.
• DateRangePickerController.selectedDates, which allows to select dates programmatically dynamically on date range picker.
• DateRangePickerController.selectedRange, which allows to select range of dates programmatically dynamically on date range picker.
• DateRangePickerController.selectedRanges, which allows to select ranges of dates programmatically dynamically on date range picker.
• selectionMode, which allows to customize the selection mode with available mode options.
• onViewChanged, the callback which notifies when the current view visible date changed on the date range picker.
• onSelectionChanged, the callback which notifies when the selected cell changed on the the date range picker.
• showActionButtons, which allows to cancel of confirm the selection in the date range picker.
• onSubmit, the callback which notifies when the selected value confirmed through confirm button on date range picker.
• onCancel, the callback which notifies when the selected value canceled and reverted to previous confirmed value through cancel button on date range picker.
• Knowledge base: How to get the selected date
• Knowledge base: How to select a week
• Knowledge base: How to select all days when clicking on the day header
• Knowledge base: How to confirm or cancel the selection
• Knowledge base: How to select previous or next dates bases on selected date
• Knowledge base: How to get the start and end date of the selected range
• Knowledge base: How to programmatically select the date
• Knowledge base: How to do programmatic navigation
• Knowledge base: How to programmatically navigate to adjacent dates
• Knowledge base: How to programmatically navigate

This example demonstrates how to use the SfDateRangePickerController for SfDateRangePicker.

class MyApp extends StatefulWidget {
 @override
 MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
 DateRangePickerController _pickerController =
 DateRangePickerController();

 @override
 void initState() {
   _pickerController.selectedDates = <DateTime>[
     DateTime.now().add(Duration(days: 2)),
     DateTime.now().add(Duration(days: 4)),
     DateTime.now().add(Duration(days: 7)),
     DateTime.now().add(Duration(days: 11))
   ];
   _pickerController.displayDate = DateTime.now();
   _pickerController.addPropertyChangedListener(handlePropertyChange);
   super.initState();
 }

 void handlePropertyChange(String propertyName) {
   if (propertyName == 'selectedDates') {
     final List<DateTime> selectedDates =
     _pickerController.selectedDates!;
   } else if (propertyName == 'displayDate') {
     final DateTime displayDate = _pickerController.displayDate!;
   }
 }

 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     home: Scaffold(
       body: SfDateRangePicker(
         view: DateRangePickerView.month,
         controller: _pickerController,
         selectionMode: DateRangePickerSelectionMode.multiple,
       ),
     ),
   );
 }
}

Implementation

final DateRangePickerController? controller;