SfDateRangePicker class

A material design date range picker.

A SfDateRangePicker can be used to select single date, multiple dates, and range of dates in month view alone and provided month, year, decade and century view options to quickly navigate to the desired date, it supports minDate,maxDate and disabled date to restrict the date selection.

Default displays the DateRangePickerView.month view with single selection mode.

Set the view property with the desired DateRangePickerView to navigate to different views, or tap the SfCalendar header to navigate to the next different view in the hierarchy.

The hierarchy of views is followed by

different views in date range picker

To change the selection mode, set the selectionMode property with the DateRangePickerSelectionMode option.

To restrict the date navigation and selection interaction use minDate, maxDate, the dates beyond this will be restricted.

When the selected dates or ranges change, the widget will call the onSelectionChanged callback with new selected dates or ranges.

When the visible view changes, the widget will call the onViewChanged callback with the current view and the current view visible dates.

Requires one of its ancestors to be a Material widget. This is typically provided by a Scaffold widget.

Requires one of its ancestors to be a MediaQuery widget. Typically, a MediaQuery widget is introduced by the MaterialApp or WidgetsApp widget at the top of your application widget tree.

Note: The picker widget allows to customize its appearance using SfDateRangePickerThemeData available from SfDateRangePickerTheme widget or the SfTheme.dateRangePickerTheme widget. It can also be customized using the properties available in DateRangePickerHeaderStyle, DateRangePickerViewHeaderStyle, DateRangePickerMonthViewSettings, DateRangePickerYearCellStyle, DateRangePickerMonthCellStyle

See also:

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

class MyAppState extends State<MyApp> {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     home: Scaffold(
       body: SfDateRangePicker(
         view: DateRangePickerView.month,
         selectionMode: DateRangePickerSelectionMode.range,
         minDate: DateTime(2020, 02, 05),
         maxDate: DateTime(2020, 12, 06),
         onSelectionChanged: (DateRangePickerSelectionChangedArgs args) {
           final dynamic value = args.value;
         },
         onViewChanged: (DateRangePickerViewChangedArgs args) {
           final PickerDateRange visibleDates = args.visibleDateRange;
           final DateRangePickerView view = args.view;
         },
       ),
     ),
   );
 }
}
Inheritance

Constructors

SfDateRangePicker({Key key, DateRangePickerView view, DateRangePickerSelectionMode selectionMode: DateRangePickerSelectionMode.single, double headerHeight: 40, Color todayHighlightColor, Color backgroundColor, DateTime initialSelectedDate, List<DateTime> initialSelectedDates, PickerDateRange initialSelectedRange, List<PickerDateRange> initialSelectedRanges, bool toggleDaySelection: false, bool enablePastDates: true, bool showNavigationArrow: false, DateRangePickerSelectionShape selectionShape: DateRangePickerSelectionShape.circle, DateRangePickerNavigationDirection navigationDirection: DateRangePickerNavigationDirection.horizontal, DateRangePickerController controller, DateRangePickerViewChangedCallback onViewChanged, DateRangePickerSelectionChangedCallback onSelectionChanged, DateRangePickerHeaderStyle headerStyle, DateRangePickerYearCellStyle yearCellStyle, DateRangePickerMonthViewSettings monthViewSettings, DateTime initialDisplayDate, DateTime minDate, DateTime maxDate, DateRangePickerMonthCellStyle monthCellStyle, bool allowViewNavigation, bool enableMultiView, double viewSpacing, double selectionRadius, Color selectionColor, Color startRangeSelectionColor, Color endRangeSelectionColor, Color rangeSelectionColor, TextStyle selectionTextStyle, TextStyle rangeTextStyle, String monthFormat})
Creates a material design date range picker. [...]

Properties

allowViewNavigation bool
Used to enable or disable the view switching between DateRangePickerView through interaction in the SfDateRangePicker header. [...]
final
backgroundColor Color
The color to fill the background of the SfDateRangePicker. [...]
final
controller DateRangePickerController
An object that used for programmatic date navigation, date and range selection and view switching in SfDateRangePicker. [...]
final
enableMultiView bool
Used to enable or disable showing multiple views [...]
final
enablePastDates bool
Allows to disable the dates falls before the today date in SfDateRangePicker. [...]
final
endRangeSelectionColor Color
The color which fills the SfDateRangePicker selection view of the range end date. [...]
final
hashCode int
The hash code for this object. [...]
@nonVirtual, read-only, inherited
headerHeight double
The height for header view to layout within this in SfDateRangePicker [...]
final
headerStyle DateRangePickerHeaderStyle
Sets the style for customizing the SfDateRangePicker header view. [...]
final
initialDisplayDate DateTime
The initial date to show on the SfDateRangePicker [...]
final
initialSelectedDate DateTime
The date to initially select on the SfDateRangePicker. [...]
final
initialSelectedDates List<DateTime>
The collection of dates to initially select on the SfDateRangePicker. [...]
final
initialSelectedRange PickerDateRange
The date range to initially select on the SfDateRangePicker. [...]
final
initialSelectedRanges List<PickerDateRange>
The date ranges to initially select on the SfDateRangePicker. [...]
final
key Key
Controls how one widget replaces another widget in the tree. [...]
final, inherited
maxDate DateTime
The minimum date as much as the SfDateRangePicker will navigate. [...]
final
minDate DateTime
The minimum date as much as the SfDateRangePicker will navigate. [...]
final
monthCellStyle DateRangePickerMonthCellStyle
The style have properties which allow to customize month cells of the SfDateRangePicker. [...]
final
monthFormat String
Allows to change the month text format in SfDateRangePicker. [...]
final
monthViewSettings DateRangePickerMonthViewSettings
The settings have properties which allow to customize the month view of the SfDateRangePicker. [...]
final
The direction that SfDateRangePicker is navigating in. [...]
final
onSelectionChanged DateRangePickerSelectionChangedCallback
Called when the new dates or date ranges selected. [...]
final
onViewChanged DateRangePickerViewChangedCallback
Called when the current visible view or visible date range changes. [...]
final
rangeSelectionColor Color
The color which fills the SfDateRangePicker selection view for the range of dates which falls between the PickerDateRange.startDate and PickerDateRange.endDate. [...]
final
rangeTextStyle TextStyle
The text style for the text in the selected range or ranges cell of SfDateRangePicker month view. [...]
final
runtimeType Type
A representation of the runtime type of the object.
read-only, inherited
selectionColor Color
The color which fills the SfDateRangePicker selection view. [...]
final
selectionMode DateRangePickerSelectionMode
Defines the selection mode for SfDateRangePicker. [...]
final
selectionRadius double
The radius for the SfDateRangePicker selection circle.. [...]
final
selectionShape DateRangePickerSelectionShape
Defines the shape for the selection view in SfDateRangePicker. [...]
final
selectionTextStyle TextStyle
The text style for the text in the selected date or dates cell of SfDateRangePicker. [...]
final
showNavigationArrow bool
Displays the navigation arrows on the header view of SfDateRangePicker. [...]
final
startRangeSelectionColor Color
The color which fills the SfDateRangePicker selection view of the range start date. [...]
final
todayHighlightColor Color
Color that highlights the today date cell in SfDateRangePicker. [...]
final
toggleDaySelection bool
Allows to deselect a date when the DateRangePickerSelectionMode set as DateRangePickerSelectionMode.single. [...]
final
view DateRangePickerView
Defines the view for the SfDateRangePicker. [...]
final
viewSpacing double
Used to define the spacedouble between multiple views when the enableMultiView is enabled. Otherwise, the viewSpacing value as not applied in SfDateRangePicker. [...]
final
yearCellStyle DateRangePickerYearCellStyle
The style have properties which allow to customize the year, decade and century view of the SfDateRangePicker. [...]
final

Methods

createElement() StatefulElement
Creates a StatefulElement to manage this widget's location in the tree. [...]
inherited
createState() → _SfDateRangePickerState
Creates the mutable state for this widget at a given location in the tree. [...]
override
debugDescribeChildren() List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children. [...]
@protected, inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node. [...]
inherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent method or property is accessed. [...]
inherited
toDiagnosticsNode({String name, DiagnosticsTreeStyle style}) DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep. [...]
inherited
toString({DiagnosticLevel minLevel: DiagnosticLevel.info}) String
Returns a string representation of this object.
inherited
toStringDeep({String prefixLineOne: '', String prefixOtherLines, DiagnosticLevel minLevel: DiagnosticLevel.debug}) String
Returns a string representation of this node and its descendants. [...]
inherited
toStringShallow({String joiner: ', ', DiagnosticLevel minLevel: DiagnosticLevel.debug}) String
Returns a one-line detailed description of the object. [...]
inherited
toStringShort() String
A short, textual description of this widget.
inherited

Operators

operator ==(Object other) bool
The equality operator. [...]
@nonVirtual, inherited