Skip to content

FLUT-1020062: Enhanced Flutter datepicker UG documentation #1506

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Harsha-SF4223 wants to merge 2 commits into
base: development
Choose a base branch
from
Open

FLUT-1020062: Enhanced Flutter datepicker UG documentation #1506

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7075bd6
Updated date picker UG content
Harsha-SF4223 Jul 20, 2026
e0a1a81
Added images
Harsha-SF4223 Jul 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 58 additions & 29 deletions Flutter/DateRangePicker/Callbacks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,35 +2,48 @@
layout: post
title: Callbacks in Flutter Date Range Picker widget | Syncfusion
description: Learn here all about Callbacks of Syncfusion Flutter Date Range Picker (SfDateRangePicker) widget and more.
platform: Flutter
platform: flutter
control: SfDateRangePicker
documentation: ug
---

# Callbacks in Flutter Date Range Picker (SfDateRangePicker)

Calendar supports the [ViewChangedCallback](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerViewChangedCallback.html) and [SelectionChangedCallback](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionChangedCallback.html) to interact with the Flutter date range picker.
The date range picker supports the [ViewChangedCallback](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerViewChangedCallback.html) and [SelectionChangedCallback](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionChangedCallback.html) to interact with the Flutter date range picker.

## View changed callback

The [onViewChanged](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/onViewChanged.html) callback triggers when the current view swiped to previous or next view, picker view switched to another picker view.
The [onViewChanged](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/onViewChanged.html) callback is triggered when the current view is swiped to the previous or next view, or when the picker view is switched to another picker view.

* [visibleDateRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerViewChangedArgs/visibleDateRange.html) - returns the start and end dates of the current visible month.

{% tabs %}
{% highlight dart hl_lines="6 7 8" %}
{% highlight dart hl_lines="15 16 17" %}

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_datepicker/datepicker.dart';

void main() {
runApp(const DateRangePickerApp());
}

class DateRangePickerApp extends StatelessWidget {
const DateRangePickerApp({super.key});

@override
Widget build(BuildContext context) {
return Scaffold(
body: SfDateRangePicker(
view: DateRangePickerView.month,
onViewChanged: (DateRangePickerViewChangedArgs args) {
var visibleDates = args.visibleDateRange;
},
return MaterialApp(
home: Scaffold(
body: SfDateRangePicker(
view: DateRangePickerView.month,
onViewChanged: (DateRangePickerViewChangedArgs args) {
final DateTime? visibleDateRange = args.visibleDateRange.startDate;
},
),
),
);
}
}

{% endhighlight %}
{% endtabs %}
Expand All @@ -40,31 +53,47 @@ The [onViewChanged](https://pub.dev/documentation/syncfusion_flutter_datepicker/

## Selection changed callback

The [onSelectionChanged](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/onSelectionChanged.html) callback triggers when selecting the dates from the date picker.
The [onSelectionChanged](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/onSelectionChanged.html) callback is triggered when dates are selected from the date range picker.

* `args.value` - returns the dates based on the selection mode.
* `args.value` - Returns the selected value based on the selection mode: `DateTime` for single selection, `List<DateTime>` for multiple selection, `PickerDateRange` for range selection, and `List<PickerDateRange>` for multi-range selection.

{% tabs %}
{% highlight dart hl_lines="7 8 9 10 11 12 13 14 15 16 17 18" %}
{% highlight dart hl_lines="16 17 18 19 20 21 22 23 24 25 26 27" %}

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_datepicker/datepicker.dart';

void main() {
runApp(const DateRangePickerApp());
}

class DateRangePickerApp extends StatelessWidget {
const DateRangePickerApp({super.key});

@override
Widget build(BuildContext context) {
return Scaffold(
body: SfDateRangePicker(
view: DateRangePickerView.month,
selectionMode: DateRangePickerSelectionMode.range,
onSelectionChanged: (DateRangePickerSelectionChangedArgs args) {
if (args.value is PickerDateRange) {
final DateTime rangeStartDate = args.value.startDate;
final DateTime rangeEndDate = args.value.endDate;
} else if (args.value is DateTime) {
final DateTime selectedDate = args.value;
} else if (args.value is List<DateTime>) {
final List<DateTime> selectedDates = args.value;
} else {
final List<PickerDateRange> selectedRanges = args.value;
}
},
return MaterialApp(
home: Scaffold(
body: SfDateRangePicker(
view: DateRangePickerView.month,
selectionMode: DateRangePickerSelectionMode.range,
onSelectionChanged: (DateRangePickerSelectionChangedArgs args) {
if (args.value is PickerDateRange) {
final DateTime? rangeStartDate = args.value.startDate;
final DateTime? rangeEndDate = args.value.endDate;
// Use the range values as needed.
} else if (args.value is DateTime) {
final DateTime selectedDate = args.value;
// Use the selected date value as needed.
} else if (args.value is List<DateTime>) {
final List<DateTime> selectedDates = args.value;
// Use the selected dates list as needed.
} else {
final List<PickerDateRange> selectedRanges = args.value;
// Use the selected ranges list as needed.
}
},
),
),
);
}
Expand Down
34 changes: 17 additions & 17 deletions Flutter/DateRangePicker/accessibility.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ documentation: ug
# Accessibility in Flutter DateRangePicker (SfDateRangePicker)

## Screen reader support
The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) can easily be accessed by screen readers. Please find the following table to get spoken feedback about the inner element contents of the screen.
The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) can easily be accessed by screen readers. The following table describes the spoken feedback for inner elements of the screen.

### Month view

Expand All @@ -19,7 +19,7 @@ The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepic
| Month cell | EEE, dd/MMMM/yyyy | Thursday the 2nd of January 2020 |
| Month header | MMMM yyyy | January 2020 |
| View header | EEE | Monday |
| Disabled cells (Enable dates in past, dates exceed min/max dates) | EEE, dd/MMMM/yyyy, Disabled date | Friday, 31st January 2020, Disabled date |
| Disabled cells (dates in the past when enablePastDates is false, or dates beyond minDate/maxDate) | EEE, dd/MMMM/yyyy, Disabled date | Friday, 31st January 2020, Disabled date |
| Blackout date | EEE, dd/MMMM/yyyy, blackout date | 6th February 2020, Blackout date |
| Week number panel | Week, Week number | Week 26 |

Expand All @@ -29,23 +29,23 @@ The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepic
|------------------------------------------------------------------|--------------------------|------------------------------|
| Year cell | MMMM yyyy | January 2020 |
| Header | yyyy | 2020 |
| Disabled cell (Enable dates in past, dates exceeds min/max date) | MMMM yyyy, Disabled cell | December 2019, Disabled cell |
| Disabled cell (dates in the past when enablePastDates is false, or dates exceed minDate/maxDate) | MMMM yyyy, Disabled cell | December 2019, Disabled cell |

### Decade view

| View | Format | Example |
|------------------------------------------------------------------|---------------------|--------------------|
| Header | yyyy - yyyy | 2020 to 2029 |
| Decade cell | yyyy | 2020 |
| Disabled cell (Enable dates in past, dates exceeds min/max date) | yyyy, Disabled cell | 2019 Disabled cell |
| Disabled cell (dates in the past when enablePastDates is false, or dates exceed minDate/maxDate) | yyyy, Disabled cell | 2019 Disabled cell |

### Century view

| View | Format | Example |
|------------------------------------------------------------------|-------------|-----------------------------|
| Header | yyyy - yyyy | 2020 to 2029 |
| Century cell | yyyy - yyyy | 2020 to 2029 |
| Disabled cell (Enable dates in past, dates exceeds min/max date) | yyyy - yyyy | 2010 to 2019, Disabled cell |
| Disabled cell (dates in the past when enablePastDates is false, or dates exceed minDate/maxDate) | yyyy - yyyy | 2010 to 2019, Disabled cell |

### Navigation arrows

Expand All @@ -58,7 +58,7 @@ The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepic

The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) [theming](https://help.syncfusion.com/flutter/themes) support offers a consistent and standardized look, as well as the ability to set the colors for all the UI elements.

The following APIs allows you to customize the colors of the following elements.
The following APIs allow you to customize the colors of the following elements.
* [viewHeaderStyle](https://help.syncfusion.com/flutter/daterangepicker/headers#view-header)
* [headerStyle](https://help.syncfusion.com/flutter/daterangepicker/headers#header-appearance)
* [leadingDatesDecoration](https://help.syncfusion.com/flutter/daterangepicker/customizations#month-cell-customization)
Expand All @@ -75,7 +75,7 @@ The following APIs allows you to customize the colors of the following elements.

## Large fonts

The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) font size can be adjusted automatically based on device settings and the font size scaled based on the [MediaQueryData.textScaleFactor](https://api.flutter.dev/flutter/widgets/MediaQueryData/textScaleFactor.html). It also allows you to change the font size of all elements in date range picker.
The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) font size can be adjusted automatically based on device settings and the font size scaled based on the [MediaQueryData.textScaler](https://api.flutter.dev/flutter/widgets/MediaQueryData/textScaler.html). It also allows you to change the font size of all elements in date range picker.
* [todayTextStyle](https://help.syncfusion.com/flutter/daterangepicker/customizations)
* [leadingDatesTextStyle](https://help.syncfusion.com/flutter/daterangepicker/customizations)
* [trailingDatesTextStyle](https://help.syncfusion.com/flutter/daterangepicker/customizations)
Expand All @@ -97,14 +97,14 @@ The following keyboard interactions are supported by the [SfDateRangePicker](htt
| Down arrow | Selects the same day of the next week |
| Right arrow | Selects the day after |
| Left arrow | Selects the day before |
| Alt+1 | Displays month view |
| Alt+2 | Displays year view |
| Alt+3 | Displays decade view |
| Alt+4 | Displays century view |
| Alt + 1 | Displays month view |
| Alt + 2 | Displays year view |
| Alt + 3 | Displays decade view |
| Alt + 4 | Displays century view |
| Tap | Focuses the next clickable element |
| Shift + upper arrow | Selects the same day in previous week to complete the range selection or add the day in the multiple selection |
| Shift + down arrow | Selects the same day in next week to complete the range selection or add the day in the multiple selection |
| Shift + left arrow | Selects the day before to complete the range selection or add the day in the multiple selection |
| Shift + right arrow | Selects the day after to complete the range selection or add the day in the multiple selection |
| Ctrl + left arrow | To navigate to the previous view |
| Ctrl + right arrow | To navigate to the next view |
| Shift + Up arrow | Selects the same day in previous week to complete the range selection or add the day in the multiple selection |
| Shift + Down arrow | Selects the same day in next week to complete the range selection or add the day in the multiple selection |
| Shift + Left arrow | Selects the day before to complete the range selection or add the day in the multiple selection |
| Shift + Right arrow | Selects the day after to complete the range selection or add the day in the multiple selection |
| Ctrl + Left arrow | To navigate to the previous view |
| Ctrl + Right arrow | To navigate to the next view |
Loading