Devlog

SfDatePicker in Flutter

,

Official page

Import syncfusion_flutter_datepicker package

1
2
3
4
dependencies:
  flutter:
    sdk: flutter
  syncfusion_flutter_datepicker: ^19.4.38
1
import 'package:syncfusion_flutter_datepicker/datepicker.dart';

Add date range picker to the widget tree

Add the SfDateRangePicker widget as a child of any widget. Here, the SfDateRangePicker widget is added as a child of the scaffold widget.

1
2
3
4
5
6
7
@override
Widget build(BuildContext context) {
  return Scaffold(
      body: Container(
    child: SfDateRangePicker(),
  ));
}

Change different views

The SfDateRangePicker widget provides four different types of views to display. It can be assigned to the widget constructor by using the view property. Default view of the widget is month view. By default the current date will be displayed initially for all the date range picker views.

1
2
3
4
5
6
7
@override
Widget build(BuildContext context) {
  return Scaffold(
      body: SfDateRangePicker(
    view: DateRangePickerView.year,
  ));
}

Change first day of week

The DateRangePicker widget will be rendered with Sunday as the first day of the week, but you can customize it to any day by using the firstDayOfWeek property.

1
2
3
4
5
6
7
8
@override
Widget build(BuildContext context) {
	return Scaffold(
		body: SfDateRangePicker(
      view: DateRangePickerView.month,
      monthViewSettings: DateRangePickerMonthViewSettings(firstDayOfWeek: 1),
    ));
}

Date selection

The DateRangePicker supports selecting single, multiple, and range of dates. It also supports programmatic selection.

The selected date or range details can be obtained using the onSelectionChanged callback of date range picker. The callback will return the DateRangePickerSelectionChangedArgs which contains the selected date or range details.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
void _onSelectionChanged(DateRangePickerSelectionChangedArgs args) {
  // TODO: implement your code here
}

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      body: Container(
        child: SfDateRangePicker(
          onSelectionChanged: _onSelectionChanged,
          selectionMode: DateRangePickerSelectionMode.range,
        ),
      ),
    ),
  );
}

SelectionMode

Default selection mode pick only one date. but if you configure selection mode like the below code, you can get the range of date. 

1
2
3
4
5
SfDateRangePicker(
                view: DateRangePickerView.year,
                selectionMode: DateRangePickerSelectionMode.range,
                onSelectionChanged: _onSelectionChanged,
              )

args.value

I just arrange the properties name of start date and end date in DataRangePickerSelectionChangedArgs object. we should use these properties in onSelectionChanged callback function().

  • if) single date

    • args.value

  • if) multiple date

    • args.value.startDate
    • args.value.endDate
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
void _onSelectionChanged(DateRangePickerSelectionChangedArgs args) {
    /// The argument value will return the changed date as [DateTime] when the
    /// widget [SfDateRangeSelectionMode] set as single.
    ///
    /// The argument value will return the changed dates as [List<DateTime>]
    /// when the widget [SfDateRangeSelectionMode] set as multiple.
    ///
    /// The argument value will return the changed range as [PickerDateRange]
    /// when the widget [SfDateRangeSelectionMode] set as range.
    ///
    /// The argument value will return the changed ranges as
    /// [List<PickerDateRange] when the widget [SfDateRangeSelectionMode] set as
    /// multi range.
    setState(() {
      if (args.value is PickerDateRange) {
        _range = '${DateFormat('dd/MM/yyyy').format(args.value.startDate)} -'
            // ignore: lines_longer_than_80_chars
            ' ${DateFormat('dd/MM/yyyy').format(args.value.endDate ?? args.value.startDate)}';
      } else if (args.value is DateTime) {
        _selectedDate = args.value.toString();
      } else if (args.value is List<DateTime>) {
        _dateCount = args.value.length.toString();
      } else {
        _rangeCount = args.value.length.toString();
      }
    });
  }
Share