---
title: "What’s New in 2021 Volume 3: Flutter Date Range Picker"
published_at: "2021-10-12T10:30:08+00:00"
modified_at: "2025-03-20T08:46:54+00:00"
url: "https://www.syncfusion.com/blogs/post/whats-new-in-2021-volume-3-flutter-date-range-picker"
excerpt: "The Flutter Date Range Picker is a lightweight widget that allows users to easily select a single date, multiple dates, or a range of dates. It provides month, year, decade, and century views to navigate to the desired date quickly...."
taxonomy_category:
  - "Desktop"
  - "Flutter"
  - "Mobile"
  - "UI"
  - "Web"
  - "What's new"
taxonomy_post_tag:
  - "Android"
  - "DateRangePicker"
  - "Flutter"
  - "Mobile"
  - "Web Development"
---

# What’s New in 2021 Volume 3: Flutter Date Range Picker

[Nijamudeen](https://www.syncfusion.com/blogs/author/nijamudeensulaiman)

![What’s New in 2021 Volume 3: Flutter Date Range Picker](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/What%E2%80%99s-New-in-2021-Volume-3-Flutter-Date-Range-Picker.png)


The [Flutter Date Range Picker](https://www.syncfusion.com/flutter-widgets/flutter-daterangepicker)
 is a lightweight widget that allows users to easily select a single date, multiple dates, or a range of dates. It provides month, year, decade, and century views to navigate to the desired date quickly.

At Syncfusion, we are continuously reviewing the constructive comments we receive from our customers, which include various feature requests. From there, we picked the most widely requested features and made them available in the [Essential Studio® 2021 Volume 3](https://www.syncfusion.com/forums/169291/essential-studio-2021-volume-3-main-release-v19-3-0-43-is-available-for-download)
 release.

In this blog post, I’ll briefly discuss the new features included in the Flutter Date Range Picker widget for the 2021 Volume 3 release.

## Today button

You can display the today button at the bottom of the view by setting the value to **true** in the ** showTodayButton** property of the ** SfDateRangePicker**. This helps us easily navigate to the current date in the Date Range Picker view.

Refer to the following code.

```
@override
Widget build(BuildContext context) {
   return MaterialApp(
     home: Scaffold(
       body: SfDateRangePicker(
         showTodayButton: true,
       ),
     ),
   );
 }
```

![Today Button in Flutter Date Range Picker](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Today-Button-in-Flutter-Date-Range-Picker.png)

Today Button in Flutter Date Range Picker

## Selectable day predicate

The new **SelectableDayPredicate** function allows only certain days to be selected. If this callback function returns true for certain days, only those days will be selectable in the date picker. With this, you can easily disable the interaction with certain dates in the Flutter Date Range Picker when the view is loading.

For example, you can disable weekends or holidays.

You can also customize the disabled dates through the **disabledDatesTextStyle** and ** disabledDatesDecoration** properties from the ** DateRangePickerMonthCellStyle** and ** DateRangePickerYearCellStyle**classes.

Refer to the following code.

```
@override
Widget build(BuildContext context) {
  return Scaffold(
      body: SafeArea(
          child: Card(
              child: SfDateRangePicker(
                selectableDayPredicate: (DateTime dateTime) {
                  if (dateTime == DateTime(2021, 9, 2) || dateTime == DateTime(2021, 9, 5) || dateTime == DateTime(2021, 9, 14) || dateTime == DateTime(2021, 9, 18) || dateTime == DateTime(2021, 9, 23) || dateTime == DateTime(2021, 9, 29))  {
                    return false;
                  }
                  return true;
                },
              )))
      );
}
```

![Selectable Day Predicate Feature in Flutter Date Range Picker](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Selectable-Day-Predicate-Feature-in-Flutter-Date-Range-Picker.png)

Selectable Day Predicate Feature in Flutter Date Range Picker

## Mouse-hovering improvement

The hovering functionality for dates in a range was improved for both range and ranges selection by highlighting the current date. Also, the hovering for extendable range selection was improved to provide a better UI experience.

## Conclusion

Thanks for reading! In this blog post, we walked through the new features and enhancements in the [Flutter Date Range Picker](https://www.syncfusion.com/flutter-widgets/flutter-daterangepicker)
 available in our [2021 Volume 3](https://www.syncfusion.com/forums/169291/essential-studio-2021-volume-3-main-release-v19-3-0-43-is-available-for-download)
 release. These features are also available in our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v19.3.0.43)
 and [What’s New](https://www.syncfusion.com/products/whatsnew)
 pages. For more details, refer to the [Flutter Date Range Picker documentation](https://help.syncfusion.com/flutter/daterangepicker/overview?web)
. We also encourage you to try out the Syncfusion Flutter UI widgets demos available on [GitHub](https://github.com/syncfusion/flutter-examples)
.

Try out these new features and leave your feedback in the comments section below!

For current customers, the newest version of Essential Studio® is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads)
 page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads)
 to check out the available features.

You can contact us through our [support forums](https://www.syncfusion.com/forums)
, [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents)
, or [feedback portal](https://www.syncfusion.com/feedback/home)
. We are always happy to assist you!

## Related blogs

- [Syncfusion Essential Studio® 2021 Volume 3 Is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2021-volume-3-is-here.aspx)
- [What’s New in 2021 Volume 3: Flutter DataGrid](https://www.syncfusion.com/blogs/post/whats-new-in-2021-volume-3-flutter-datagrid.aspx)
- [How to Update Markers in Flutter Maps from Firebase Database](https://www.syncfusion.com/blogs/post/how-to-update-markers-in-flutter-maps-from-firebase-database.aspx)
- [Use the Flutter Calendar Widget to Add Appointments from Google Sheets and Firebase [Webinar Show Notes]](https://www.syncfusion.com/blogs/post/use-the-flutter-calendar-widget-to-add-appointments-from-google-sheets-and-firebase-webinar-show-notes.aspx)
