Flutter Date Range Picker - Highly Customizable and Flexible Widget

Overview

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 quickly navigate to a desired date. It supports minimum, maximum, and disabled dates to restrict date selection.

Multi-date Picker View

Display two Date Range Pickers side by side to select ranges of dates between two separate months easily.

• Multi-date Picker in Flutter Date Range Picker documentation

Hijri Date Picker

In addition to the Gregorian calendar, the Flutter Date Range Picker supports displaying the Islamic calendar (Hijri date picker).

• Hijri Date Picker in Flutter Date Range Picker documentation.

• Hijri Date Picker in Flutter Date Range Picker example.

Quick Navigation

Navigate back and forth between date-range views and view modes.

Enable and Disable Built-in View Switching

Restrict users from navigating to different picker views by disabling view switching. Select values in terms of month, year, or decade with this feature enabled.

Extendable range selection direction

Allows extending the selection by setting the extendable range selection direction as forward, backward, both and none. If it set to none, the direction cannot be selected.

Today Button

Display the Today button at the bottom of the Flutter Date Range Picker to quickly navigate to the current date.

Change first day of week

Customize the first day of the week as needed. The default first day is Sunday.

Appearance Customization

Accessibility

Easily access the Date Range Picker with screen readers.

• Accessibility documentation

Flutter Date Range Picker Code Example

Easily get started with the Flutter Date Range Picker using a few simple lines of DART code example as demonstrated below. Also explore our Flutter Date Range Picker Example that shows you how to render and configure the Date Range Picker in Flutter.

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_Date Range Picker/Date Range Picker.dart';

@override
Widget build(BuildContext context) {
   return Scaffold(
       body: Container(
       child: SfDateRangePicker(),
));
}