How to get the start and end date of the selected range in the Flutter Date Range Picker?

1 min read

In the Flutter Date Range Picker, you can get the start and end date of the selected range by using the startDate and endDate property of the onSelectionChanged callback args.

In initState(), set the default values.

late String _startDate, _endDate;
final DateRangePickerController _controller = DateRangePickerController();
 
@override
void initState() {
  final DateTime today = DateTime.now();
  _startDate = DateFormat('dd, MMMM yyyy').format(today).toString();
  _endDate = DateFormat('dd, MMMM yyyy')
      .format(today.add(Duration(days: 3)))
      .toString();
  _controller.selectedRange = PickerDateRange(today, today.add(Duration(days: 3)));
  super.initState();
}

Using the onSelectionChanged callback get the startDate and endDate of the selected range.

void selectionChanged(DateRangePickerSelectionChangedArgs args) {
  setState(() {
    _startDate =
        DateFormat('dd, MMMM yyyy').format(args.value.startDate).toString();
    _endDate =
        DateFormat('dd, MMMM yyyy').format(args.value.endDate ?? args.value.startDate).toString();
  });
}

Assign _startDate and _endDate values to the Text properties to show the values.

Column(
  children: <Widget>[
    Container(margin: const EdgeInsets.fromLTRB(0, 20, 0, 0),
        height: 50, child: Text('StartRangeDate:' '$_startDate')),
    Container(height: 50, child: Text('EndRangeDate:' '$_endDate')),
    Card(
      margin: const EdgeInsets.fromLTRB(50, 40, 50, 100),
      child: SfDateRangePicker(
        controller: _controller,
        selectionMode: DateRangePickerSelectionMode.range,
        onSelectionChanged: selectionChanged,
        allowViewNavigation: false,
      ),
    )
  ],
),

View sample in GitHub

Month view

month