diff --git a/Flutter/DateRangePicker/Callbacks.md b/Flutter/DateRangePicker/Callbacks.md index 9b81946d3..7a2977833 100644 --- a/Flutter/DateRangePicker/Callbacks.md +++ b/Flutter/DateRangePicker/Callbacks.md @@ -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 %} @@ -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` for multiple selection, `PickerDateRange` for range selection, and `List` 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) { - final List selectedDates = args.value; - } else { - final List 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) { + final List selectedDates = args.value; + // Use the selected dates list as needed. + } else { + final List selectedRanges = args.value; + // Use the selected ranges list as needed. + } + }, + ), ), ); } diff --git a/Flutter/DateRangePicker/accessibility.md b/Flutter/DateRangePicker/accessibility.md index 4e0ae6cea..36c50c823 100644 --- a/Flutter/DateRangePicker/accessibility.md +++ b/Flutter/DateRangePicker/accessibility.md @@ -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 @@ -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 | @@ -29,7 +29,7 @@ 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 @@ -37,7 +37,7 @@ The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepic |------------------------------------------------------------------|---------------------|--------------------| | 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 @@ -45,7 +45,7 @@ The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepic |------------------------------------------------------------------|-------------|-----------------------------| | 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 @@ -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) @@ -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) @@ -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 | diff --git a/Flutter/DateRangePicker/builders.md b/Flutter/DateRangePicker/builders.md index 50a79102f..2604dd3c2 100644 --- a/Flutter/DateRangePicker/builders.md +++ b/Flutter/DateRangePicker/builders.md @@ -8,7 +8,7 @@ documentation: ug --- # Flutter Date Range Picker Builders (SfDateRangePicker) -The date range picker allows you to create a responsive UI with the conditions based on a widget’s details, and to design and create your custom view to the month cells and year cells in the date range picker. +The date range picker allows you to design custom views for month and year cells based on cell details. ## Cell builder @@ -16,69 +16,92 @@ The [DateRangePickerCellBuilder](https://pub.dev/documentation/syncfusion_flutte [DateRangePickerCellDetails](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerCellDetails-class.html): Returns the details of the cell. -* `date`: The date associate with the cell. +* `date`: The date associated with the cell. * `bound`: Returns the cell bounds. * `visibleDates`: The visible dates of the current view. {% tabs %} -{% highlight dart hl_lines="12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 3 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63" %} +{% highlight dart hl_lines="11 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65" %} -class MyAppState extends State { - final DateRangePickerController _controller = DateRangePickerController(); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, - home: Scaffold( - body: SafeArea( - child: SfDateRangePicker( - controller: _controller, - cellBuilder: ( - BuildContext context, - DateRangePickerCellDetails details, - ) { - final bool isToday = isSameDate(details.date, DateTime.now()); - final bool isBlackOut = isBlackedDate(details.date); - final bool isSpecialDate = isSpecialDay(details.date); - return Container( - margin: EdgeInsets.all(2), - padding: EdgeInsets.only(top: 10), - decoration: BoxDecoration( - color: Colors.blueAccent, - border: - isToday - ? Border.all(color: Colors.black, width: 2) - : null, - ), - child: Column( - mainAxisSize: MainAxisSize.max, - mainAxisAlignment: MainAxisAlignment.spaceAround, - children: [ - Text( - details.date.day.toString(), - style: TextStyle( - fontSize: 13, - fontWeight: FontWeight.bold, - ), + home: const PickerCellBuilder(), + ); + } +} + +class PickerCellBuilder extends StatefulWidget { + const PickerCellBuilder({super.key}); + + @override + State createState() => _PickerCellBuilderState(); +} + +class _PickerCellBuilderState extends State { + final DateRangePickerController _controller = DateRangePickerController(); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SafeArea( + child: SfDateRangePicker( + controller: _controller, + cellBuilder: ( + BuildContext context, + DateRangePickerCellDetails details, + ) { + final bool isToday = isSameDate(details.date, DateTime.now()); + final bool isBlackOut = isBlackoutDate(details.date); + final bool isSpecialDate = isSpecialDay(details.date); + return Container( + margin: const EdgeInsets.all(2), + padding: const EdgeInsets.only(top: 10), + decoration: BoxDecoration( + color: Colors.blueAccent, + border: + isToday + ? Border.all(color: Colors.black, width: 2) + : null, + ), + child: Column( + mainAxisSize: MainAxisSize.max, + mainAxisAlignment: MainAxisAlignment.spaceAround, + children: [ + Text( + details.date.day.toString(), + style: const TextStyle( + fontSize: 13, + fontWeight: FontWeight.bold, ), - isBlackOut - ? Icon(Icons.block_sharp, size: 13) - : isSpecialDate - ? Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Icon(Icons.cake, size: 13), - Icon(Icons.celebration, size: 13), - Icon(Icons.audiotrack, size: 13), - ], - ) - : Container(), - ], - ), - ); - }, - ), + ), + isBlackOut + ? const Icon(Icons.block_sharp, size: 13) + : isSpecialDate + ? const Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Icon(Icons.cake, size: 13), + Icon(Icons.celebration, size: 13), + Icon(Icons.audiotrack, size: 13), + ], + ) + : Container(), + ], + ), + ); + }, ), ), ); @@ -101,7 +124,7 @@ class MyAppState extends State { return false; } - bool isBlackedDate(DateTime date) { + bool isBlackoutDate(DateTime date) { if (date.day == 17 || date.day == 18) { return true; } @@ -114,7 +137,7 @@ class MyAppState extends State { ![Cell builder](images/builders/cell-builder.jpg) ->**NOTE** +>**NOTE** * Use [HijriDateRangePickerCellDetails](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDateRangePickerCellDetails-class.html) for the [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html). diff --git a/Flutter/DateRangePicker/customizations.md b/Flutter/DateRangePicker/customizations.md index e58c86e43..1ed931354 100644 --- a/Flutter/DateRangePicker/customizations.md +++ b/Flutter/DateRangePicker/customizations.md @@ -29,51 +29,64 @@ You can customize the calendar month view by using the [monthCellStyle](https:// * **Special Dates** – You can add special dates to the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) by using [specialDates](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/specialDates.html) property, and you can also customize the special dates text style and background by using the [specialDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/specialDatesTextStyle.html) and [specialDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/specialDatesDecoration.html). -* **Weekend Dates** – You can change weekend dates to [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) by using the [weekendDays](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/weekendDays.html) property, and you can also customize the weekend dates text style and background by using the [weekendDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/weekendTextStyle.html) and [weekendDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/weekendDatesDecoration.html). +* **Weekend Dates** – You can change weekend dates to [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) by using the [weekendDays](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/weekendDays.html) property, and you can also customize the weekend dates text style and background by using the [weekendTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/weekendTextStyle.html) and [weekendDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/weekendDatesDecoration.html). {% tabs %} -{% highlight dart hl_lines="6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26" %} +{% highlight dart hl_lines="16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49" %} + +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, - monthViewSettings: DateRangePickerMonthViewSettings( - blackoutDates: [DateTime(2020, 03, 26)], - weekendDays: [7, 6], - specialDates: [ - DateTime(2020, 03, 20), - DateTime(2020, 03, 16), - DateTime(2020, 03, 17), - ], - showTrailingAndLeadingDates: true, - ), - monthCellStyle: DateRangePickerMonthCellStyle( - blackoutDatesDecoration: BoxDecoration( - color: Colors.red, - border: Border.all(color: const Color(0xFFF44436), width: 1), - shape: BoxShape.circle, - ), - weekendDatesDecoration: BoxDecoration( - color: const Color(0xFFDFDFDF), - border: Border.all(color: const Color(0xFFB6B6B6), width: 1), - shape: BoxShape.circle, + return MaterialApp( + home: Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + monthViewSettings: const DateRangePickerMonthViewSettings( + blackoutDates: [DateTime(2020, 03, 26)], + weekendDays: [7, 6], + specialDates: [ + DateTime(2020, 03, 20), + DateTime(2020, 03, 16), + DateTime(2020, 03, 17), + ], + showTrailingAndLeadingDates: true, ), - specialDatesDecoration: BoxDecoration( - color: Colors.green, - border: Border.all(color: const Color(0xFF2B732F), width: 1), - shape: BoxShape.circle, + monthCellStyle: const DateRangePickerMonthCellStyle( + blackoutDatesDecoration: BoxDecoration( + color: Colors.red, + border: Border.all(color: Color(0xFFF44436), width: 1), + shape: BoxShape.circle, + ), + weekendDatesDecoration: BoxDecoration( + color: Color(0xFFDFDFDF), + border: Border.all(color: Color(0xFFB6B6B6), width: 1), + shape: BoxShape.circle, + ), + specialDatesDecoration: BoxDecoration( + color: Colors.green, + border: Border.all(color: Color(0xFF2B732F), width: 1), + shape: BoxShape.circle, + ), + blackoutDateTextStyle: TextStyle( + color: Colors.white, + decoration: TextDecoration.lineThrough, + ), + specialDatesTextStyle: TextStyle(color: Colors.white), ), - blackoutDateTextStyle: TextStyle( - color: Colors.white, - decoration: TextDecoration.lineThrough, - ), - specialDatesTextStyle: const TextStyle(color: Colors.white), ), ), ); } +} {% endhighlight %} {% endtabs %} @@ -88,17 +101,30 @@ You can customize the calendar month view by using the [monthCellStyle](https:// You can customize the month format of the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) using the [monthFormat](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/monthFormat.html) property. {% tabs %} -{% highlight dart hl_lines="6" %} +{% highlight dart hl_lines="14" %} + +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, - monthFormat: 'MMM', + return MaterialApp( + home: Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + monthFormat: 'MMM', + ), ), ); } +} {% endhighlight %} {% endtabs %} @@ -107,34 +133,47 @@ You can customize the month format of the [SfDateRangePicker](https://pub.dev/do ## Selection cell customization -You can also customize the date range picker section by using the [monthCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/monthCellStyle.html) of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html). +You can also customize the selection cells by using the [monthCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/monthCellStyle.html) of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html). -* **Selection date text style** – Selected date text style can be customized using the [selectionTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionTextStyle.html) property of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) that is applicable for [selectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionMode.html) is [single](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#single) and [multiple](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#multiple), it is also applicable to start and end of the selected range text style in the [single](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#single) and [multiRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#multiRange) selection. +* **Selection date text style** – Selected date text style can be customized using the [selectionTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionTextStyle.html) property of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) that is applicable for [selectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionMode.html) is [single](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#single) and [multiple](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#multiple), it is also applicable to start and end of the selected range text style in the [range](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#range) and [multiRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#multiRange) selection. * **Selection color** – Selected date background color can be customized using the [selectionColor](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionColor.html) property of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) that is applicable for [single](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#single) and [multiple](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#multiple) selections. * **Range selection text style** – Range selection date text style can be customized using the [rangeTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/rangeTextStyle.html) property that is applicable when [selectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionMode.html) is [range](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#range) or [multiRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#multiRange). -* **Range selection color** - Range selection color text style can be customized using the [startRangeSelectionColor](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/startRangeSelectionColor.html), [endRangeSelectionColor](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/endRangeSelectionColor.html) , [rangeSelectionColor](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/rangeSelectionColor.html) properties that is applicable when [selectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionMode.html) is in [range](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#range) or [multiRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#multiRange). +* **Range selection color** – The range selection background color can be customized using the [startRangeSelectionColor](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/startRangeSelectionColor.html), [endRangeSelectionColor](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/endRangeSelectionColor.html) , [rangeSelectionColor](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/rangeSelectionColor.html) properties that is applicable when [selectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionMode.html) is in [range](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#range) or [multiRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#multiRange). {% tabs %} -{% highlight dart hl_lines="7 8 9 10 11 12" %} +{% highlight dart hl_lines="16 17 18 19 20 21 25" %} + +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, - selectionTextStyle: const TextStyle(color: Colors.white), - selectionColor: Colors.blue, - startRangeSelectionColor: Colors.purple, - endRangeSelectionColor: Colors.purple, - rangeSelectionColor: Colors.purpleAccent, - rangeTextStyle: const TextStyle(color: Colors.white, fontSize: 20), + return MaterialApp( + home: Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + selectionMode: DateRangePickerSelectionMode.range, + selectionTextStyle: const TextStyle(color: Colors.white), + selectionColor: Colors.blue, + startRangeSelectionColor: Colors.purple, + endRangeSelectionColor: Colors.purple, + rangeSelectionColor: Colors.purpleAccent, + rangeTextStyle: const TextStyle(color: Colors.white, fontSize: 20), + ), ), ); } +} {% endhighlight %} {% endtabs %} @@ -145,47 +184,59 @@ You can also customize the date range picker section by using the [monthCellStyl You can customize the calendar `year`, `decade`, and `century` view by using the [yearCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/yearCellStyle.html) of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html). -* **Current year** – You can customize the text style and background of the current year in the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) by using the [textStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerYearCellStyle/textStyle.html) and [cellDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerYearCellStyle/cellDecoration.html) properties of [DateRangePickerYearCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerYearCellStyle-class.html) +* **Current year** – You can customize the text style and background of the current year in the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) by using the [textStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerYearCellStyle/textStyle.html) and [cellDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerYearCellStyle/cellDecoration.html) properties of [DateRangePickerYearCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerYearCellStyle-class.html). -* **Disabled dates** – Disable dates text style and background of the [minDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/minDate.html) and [maxDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/maxDate.html) in the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html), and the dates which are disabled by the [selectableDayPredicate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectableDayPredicate.html) callback are customized by using [disabledDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/disabledDatesTextStyle.html) and [disabledDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/disabledDatesDecoration.html). +* **Disabled dates** – Disable dates text style and background of the [minDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/minDate.html) and [maxDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/maxDate.html) in the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html), and the dates which are disabled by the [selectableDayPredicate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectableDayPredicate.html) callback are customized by using [disabledDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerYearCellStyle/disabledDatesTextStyle.html) and [disabledDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerYearCellStyle/disabledDatesDecoration.html). -* **Leading dates** – You can also customize the text style and background of the leading month dates in the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) by using the [leadingDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/leadingDatesTextStyle.html) and [leadingDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/leadingDatesDecoration.html). +* **Leading dates** – You can also customize the text style and background of the leading year cells in the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) by using the [leadingDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerYearCellStyle/leadingDatesTextStyle.html) and [leadingDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerYearCellStyle/leadingDatesDecoration.html). -* **Today date** – You can customize the text style and background of the today's date in the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) by using the [todayTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/todayTextStyle.html) and [todayCellDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/todayCellDecoration.html). +* **Today date** – You can customize the text style and background of the today's date in the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) by using the [todayTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerYearCellStyle/todayTextStyle.html) and [todayCellDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerYearCellStyle/todayCellDecoration.html). {% tabs %} -{% highlight dart hl_lines="7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24" %} +{% highlight dart hl_lines="16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 40" %} + +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, - yearCellStyle: DateRangePickerYearCellStyle( - disabledDatesDecoration: BoxDecoration( - color: const Color(0xFFDFDFDF), - border: Border.all(color: const Color(0xFFB6B6B6), width: 1), - shape: BoxShape.circle, - ), - disabledDatesTextStyle: const TextStyle(color: Colors.black), - leadingDatesDecoration: BoxDecoration( - color: const Color(0xFFDFDFDF), - border: Border.all(color: const Color(0xFFB6B6B6), width: 1), - shape: BoxShape.circle, - ), - leadingDatesTextStyle: const TextStyle(color: Colors.black), - textStyle: const TextStyle(color: Colors.blue), - todayCellDecoration: BoxDecoration( - color: const Color(0xFFDFDFDF), - border: Border.all(color: const Color(0xFFB6B6B6), width: 1), - shape: BoxShape.circle, + return MaterialApp( + home: Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.year, + yearCellStyle: const DateRangePickerYearCellStyle( + disabledDatesDecoration: BoxDecoration( + color: Color(0xFFDFDFDF), + border: Border.all(color: Color(0xFFB6B6B6), width: 1), + shape: BoxShape.circle, + ), + disabledDatesTextStyle: TextStyle(color: Colors.black), + leadingDatesDecoration: BoxDecoration( + color: Color(0xFFDFDFDF), + border: Border.all(color: Color(0xFFB6B6B6), width: 1), + shape: BoxShape.circle, + ), + leadingDatesTextStyle: TextStyle(color: Colors.black), + textStyle: TextStyle(color: Colors.blue), + todayCellDecoration: BoxDecoration( + color: Color(0xFFDFDFDF), + border: Border.all(color: Color(0xFFB6B6B6), width: 1), + shape: BoxShape.circle, + ), + todayTextStyle: TextStyle(color: Colors.purple), ), - todayTextStyle: const TextStyle(color: Colors.purple), ), ), ); } +} {% endhighlight %} {% endtabs %} diff --git a/Flutter/DateRangePicker/date-navigations.md b/Flutter/DateRangePicker/date-navigations.md index 3781de066..f79ec592d 100644 --- a/Flutter/DateRangePicker/date-navigations.md +++ b/Flutter/DateRangePicker/date-navigations.md @@ -2,7 +2,7 @@ layout: post title: Date Navigations in Flutter Date Range Picker widget | Syncfusion description: Learn here all about Date navigations feature of Syncfusion Flutter Date Range Picker (SfDateRangePicker) widget and more. -platform: Flutter +platform: flutter control: SfDateRangePicker documentation: ug --- @@ -11,28 +11,49 @@ documentation: ug ## Programmatic date navigation -You can programmatically navigate dates in the calendar widget by using the [displayDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/displayDate.html) property of [DateRangePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController-class.html) +You can programmatically navigate to dates in the calendar widget by using the [displayDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/displayDate.html) property of [DateRangePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController-class.html) {% tabs %} -{% highlight dart hl_lines="2 6 16" %} +{% highlight dart hl_lines="3 12 22" %} -class MyAppState extends State { - DateRangePickerController _datePickerController = DateRangePickerController(); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override - initState() { + Widget build(BuildContext context) { + return MaterialApp( + home: _DisplayDateExample(), + ); + } +} + +class _DisplayDateExample extends StatefulWidget { + @override + State<_DisplayDateExample> createState() => _DisplayDateExampleState(); +} + +class _DisplayDateExampleState extends State<_DisplayDateExample> { + final DateRangePickerController _datePickerController = DateRangePickerController(); + + @override + void initState() { _datePickerController.displayDate = DateTime(2022, 02, 05); super.initState(); } @override Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - controller: _datePickerController, - ), + return Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + controller: _datePickerController, ), ); } @@ -45,26 +66,47 @@ class MyAppState extends State { ## Programmatic view navigation -You can programmatically navigate view in the calendar widget by using the [view](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/view.html) property of [DateRangePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController-class.html). +You can programmatically navigate the view in the calendar widget by using the [view](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/view.html) property of [DateRangePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController-class.html). {% tabs %} -{% highlight dart hl_lines="2 6 15" %} +{% highlight dart hl_lines="3 12 21" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} -class MyAppState extends State { - DateRangePickerController _datePickerController = DateRangePickerController(); +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override - initState() { + Widget build(BuildContext context) { + return MaterialApp( + home: _ViewNavigationExample(), + ); + } +} + +class _ViewNavigationExample extends StatefulWidget { + @override + State<_ViewNavigationExample> createState() => _ViewNavigationExampleState(); +} + +class _ViewNavigationExampleState extends State<_ViewNavigationExample> { + final DateRangePickerController _datePickerController = DateRangePickerController(); + + @override + void initState() { _datePickerController.view = DateRangePickerView.month; super.initState(); } @override Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: SfDateRangePicker(controller: _datePickerController), - ), + return Scaffold( + body: SfDateRangePicker(controller: _datePickerController), ); } } @@ -76,21 +118,32 @@ class MyAppState extends State { ## Allow view navigation -You can allow or restrict the built-in view navigation to any picker views by using the [allowViewNavigation](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/allowViewNavigation.html) property of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html). It allows you to restrict the built-in view switching through touch interaction and allow you to select the cells in the year, decade and century views. +You can allow or restrict the built-in view navigation to any picker views by using the [allowViewNavigation](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/allowViewNavigation.html) property of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html). It allows you to restrict the built-in view switching through touch interaction and allows you to select the cells in the year, decade and century views. {% tabs %} -{% highlight dart hl_lines="5" %} +{% highlight dart hl_lines="13" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SfDateRangePicker( - allowViewNavigation: false - ) + allowViewNavigation: false, + ), ), ); } +} {% endhighlight %} {% endtabs %} @@ -98,38 +151,54 @@ You can allow or restrict the built-in view navigation to any picker views by us ## Programmatic date selection -You can programmatically select the dates in the calendar widget by using the [DateRangePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController-class.html) property. +You can programmatically select the dates in the calendar widget by using the [DateRangePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController-class.html) class. ### Single selection Initially or during the run time, you can select the date programmatically by using the [selectedDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/selectedDate.html) of [DateRangePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController-class.html) property. It is only applicable when the [selectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionMode.html) is set to [DateRangePickerSelectionMode.single](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#single). {% tabs %} -{% highlight dart hl_lines="6 10 20 21" %} +{% highlight dart hl_lines="3 14 18 28 29" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); -class MyApp extends StatefulWidget { @override - _MyAppState createState() => _MyAppState(); + Widget build(BuildContext context) { + return MaterialApp( + home: _SingleSelectionExample(), + ); + } +} + +class _SingleSelectionExample extends StatefulWidget { + @override + State<_SingleSelectionExample> createState() => _SingleSelectionExampleState(); } -class _MyAppState extends State { - DateRangePickerController _datePickerController = DateRangePickerController(); +class _SingleSelectionExampleState extends State<_SingleSelectionExample> { + final DateRangePickerController _datePickerController = DateRangePickerController(); @override - initState() { - _datePickerController.selectedDate = DateTime.now().add(Duration(days: 2)); + void initState() { + _datePickerController.selectedDate = DateTime.now().add(const Duration(days: 2)); super.initState(); } @override Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - selectionMode: DateRangePickerSelectionMode.single, - controller: _datePickerController, - ), + return Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + selectionMode: DateRangePickerSelectionMode.single, + controller: _datePickerController, ), ); } @@ -145,36 +214,52 @@ class _MyAppState extends State { Initially or during the run time, you can select the multiple dates programmatically by using the [selectedDates](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/selectedDates.html) of [DateRangePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController-class.html) property. It is only applicable when the [selectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionMode.html) is set to [DateRangePickerSelectionMode.multiple](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#multiple). {% tabs %} -{% highlight dart hl_lines="6 10 11 12 13 14 15 25 26" %} +{% highlight dart hl_lines="3 14 18 19 20 21 22 23 33 34" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: _MultiSelectionExample(), + ); + } +} -class MyApp extends StatefulWidget { +class _MultiSelectionExample extends StatefulWidget { @override - _MyAppState createState() => _MyAppState(); + State<_MultiSelectionExample> createState() => _MultiSelectionExampleState(); } -class _MyAppState extends State { - DateRangePickerController _datePickerController = DateRangePickerController(); +class _MultiSelectionExampleState extends State<_MultiSelectionExample> { + final DateRangePickerController _datePickerController = DateRangePickerController(); @override - initState() { + void initState() { _datePickerController.selectedDates = [ - DateTime.now().add(Duration(days: 2)), - DateTime.now().add(Duration(days: 4)), - DateTime.now().add(Duration(days: 7)), - DateTime.now().add(Duration(days: 11)), + DateTime.now().add(const Duration(days: 2)), + DateTime.now().add(const Duration(days: 4)), + DateTime.now().add(const Duration(days: 7)), + DateTime.now().add(const Duration(days: 11)), ]; super.initState(); } @override Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - selectionMode: DateRangePickerSelectionMode.multiple, - controller: _datePickerController, - ), + return Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + selectionMode: DateRangePickerSelectionMode.multiple, + controller: _datePickerController, ), ); } @@ -190,13 +275,36 @@ class _MyAppState extends State { Initially or during run time, you can select the single date range programmatically by using the [selectedRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/selectedRange.html) of [DateRangePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController-class.html) property. It is only applicable when the [selectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionMode.html) is set to [DateRangePickerSelectionMode.range](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#range). {% tabs %} -{% highlight dart hl_lines="2 6 7 17 18" %} +{% highlight dart hl_lines="3 12 16 17 27 28" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; -class MyAppState extends State { - DateRangePickerController _datePickerController = DateRangePickerController(); +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override - initState() { + Widget build(BuildContext context) { + return MaterialApp( + home: _RangeSelectionExample(), + ); + } +} + +class _RangeSelectionExample extends StatefulWidget { + @override + State<_RangeSelectionExample> createState() => _RangeSelectionExampleState(); +} + +class _RangeSelectionExampleState extends State<_RangeSelectionExample> { + final DateRangePickerController _datePickerController = DateRangePickerController(); + + @override + void initState() { _datePickerController.selectedRange = PickerDateRange(DateTime(2020, 03, 01), DateTime(2020, 03, 05)); super.initState(); @@ -204,13 +312,11 @@ class MyAppState extends State { @override Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - selectionMode: DateRangePickerSelectionMode.range, - controller: _datePickerController, - ), + return Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + selectionMode: DateRangePickerSelectionMode.range, + controller: _datePickerController, ), ); } @@ -219,43 +325,61 @@ class MyAppState extends State { {% endhighlight %} {% endtabs %} -![Programmatic selectedrange Date Range Picker](images/date-navigations/programmatic-range selection.png) +![Programmatic selectedrange Date Range Picker](images/date-navigations/programmatic-range-selection.png) ### Multi Range selection Initially or during run time, you can select more than one date range programmatically by using the [selectedRanges](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/selectedRanges.html) of [DateRangePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController-class.html) property. It is only applicable when the [selectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionMode.html) is set to [DateRangePickerSelectionMode.multiRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#multiRange). +N> The [PickerDateRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/PickerDateRange-class.html) class represents a date range with a start date and an optional end date. + {% tabs %} -{% highlight dart hl_lines="6 10 11 12 13 14 15 25 26" %} +{% highlight dart hl_lines="3 14 18 19 20 21 22 23 24 34 35" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); -class MyApp extends StatefulWidget { @override - _MyAppState createState() => _MyAppState(); + Widget build(BuildContext context) { + return MaterialApp( + home: _MultiRangeSelectionExample(), + ); + } +} + +class _MultiRangeSelectionExample extends StatefulWidget { + @override + State<_MultiRangeSelectionExample> createState() => _MultiRangeSelectionExampleState(); } -class _MyAppState extends State { - DateRangePickerController _datePickerController = DateRangePickerController(); +class _MultiRangeSelectionExampleState extends State<_MultiRangeSelectionExample> { + final DateRangePickerController _datePickerController = DateRangePickerController(); @override - initState() { - _datePickerController.selectedRanges =[ - PickerDateRange(DateTime.now().subtract(Duration(days: 4)), - DateTime.now().add(Duration(days: 4))), - PickerDateRange(DateTime.now().add(Duration(days: 11)), - DateTime.now().add(Duration(days: 16))) + void initState() { + _datePickerController.selectedRanges = [ + PickerDateRange(DateTime.now().subtract(const Duration(days: 4)), + DateTime.now().add(const Duration(days: 4))), + PickerDateRange(DateTime.now().add(const Duration(days: 11)), + DateTime.now().add(const Duration(days: 16))) ]; super.initState(); } @override Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body:SfDateRangePicker( - view: DateRangePickerView.month, - selectionMode: DateRangePickerSelectionMode.multiRange, - controller: _datePickerController, - ) + return Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + selectionMode: DateRangePickerSelectionMode.multiRange, + controller: _datePickerController, ), ); } @@ -272,32 +396,54 @@ By default, the date can be navigated to next and previous views using the touch ### Forward -You can use the [forward](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/forward.html) method of [DateRangePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController-class.html) for viewing the next immediate next visible dates in the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html). It will move to next month if the calendar view is a month. +You can use the [forward](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/forward.html) method of [DateRangePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController-class.html) for viewing the next visible dates in the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html). It will move to next month if the calendar view is a month. {% tabs %} -{% highlight dart hl_lines="2 13 20" %} +{% highlight dart hl_lines="3 14 21" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; -class MyAppState extends State { - DateRangePickerController _datePickerController = DateRangePickerController(); +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( - home: Scaffold( - appBar: AppBar( - title: Text('DateRangePicker Demo'), - actions: [ - IconButton(icon: Icon(Icons.arrow_forward), - onPressed: () { - _datePickerController.forward!(); - }, - ), - ], - ), - body: SfDateRangePicker( - view: DateRangePickerView.month, - controller: _datePickerController, - ), + home: _ForwardExample(), + ); + } +} + +class _ForwardExample extends StatefulWidget { + @override + State<_ForwardExample> createState() => _ForwardExampleState(); +} + +class _ForwardExampleState extends State<_ForwardExample> { + final DateRangePickerController _datePickerController = DateRangePickerController(); + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + title: const Text('DateRangePicker Demo'), + actions: [ + IconButton(icon: const Icon(Icons.arrow_forward), + onPressed: () { + // Use the null assertion operator because `forward` is a nullable method. + _datePickerController.forward!(); + }, + ), + ], + ), + body: SfDateRangePicker( + view: DateRangePickerView.month, + controller: _datePickerController, ), ); } @@ -308,33 +454,55 @@ class MyAppState extends State { ### Backward -You can use the [backward](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/backward.html) method of [DateRangePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController-class.html) for viewing the previous immediate previous visible dates in the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html). It will move to the previous month if the calendar view is in month. +You can use the [backward](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/backward.html) method of [DateRangePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController-class.html) for viewing the previous visible dates in the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html). It will move to the previous month if the calendar view is in month. {% tabs %} -{% highlight dart hl_lines="2 14 21" %} +{% highlight dart hl_lines="3 15 22" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; -class MyAppState extends State { - DateRangePickerController _datePickerController = DateRangePickerController(); +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( - home: Scaffold( - appBar: AppBar( - title: Text('DateRangePicker Demo'), - actions: [ - IconButton( - icon: Icon(Icons.arrow_back), - onPressed: () { - _datePickerController.backward!(); - }, - ), - ], - ), - body: SfDateRangePicker( - view: DateRangePickerView.month, - controller: _datePickerController, - ), + home: _BackwardExample(), + ); + } +} + +class _BackwardExample extends StatefulWidget { + @override + State<_BackwardExample> createState() => _BackwardExampleState(); +} + +class _BackwardExampleState extends State<_BackwardExample> { + final DateRangePickerController _datePickerController = DateRangePickerController(); + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + title: const Text('DateRangePicker Demo'), + actions: [ + IconButton( + icon: const Icon(Icons.arrow_back), + onPressed: () { + // Use the null assertion operator because `backward` is a nullable method. + _datePickerController.backward!(); + }, + ), + ], + ), + body: SfDateRangePicker( + view: DateRangePickerView.month, + controller: _datePickerController, ), ); } @@ -349,17 +517,30 @@ class MyAppState extends State { You can navigate the Month, Year, Decade, and Century views either [Vertical](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerNavigationDirection.html#vertical) or [Horizontal](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerNavigationDirection.html#horizontal) directions by setting the [navigationDirection](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/navigationDirection.html) property of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html). {% tabs %} -{% highlight dart hl_lines="6" %} +{% highlight dart hl_lines="13" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - navigationDirection: DateRangePickerNavigationDirection.vertical, + return MaterialApp( + home: Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + navigationDirection: DateRangePickerNavigationDirection.vertical, + ), ), ); } +} {% endhighlight %} {% endtabs %} @@ -370,7 +551,17 @@ You can navigate the Month, Year, Decade, and Century views either [Vertical](ht You can customize the navigation mode of the date range picker by using the [navigationMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/navigationMode.html) property of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html), which has options to disable the view navigation using the swipe interaction, also allows to scroll the view. By default, the [navigationMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/navigationMode.html) is set to [DateRangePickerNavigationMode.snap](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerNavigationMode.html). {% tabs %} -{% highlight dart hl_lines="7" %} +{% highlight dart hl_lines="14" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { @@ -383,6 +574,7 @@ You can customize the navigation mode of the date range picker by using the [nav ), ); } +} {% endhighlight %} {% endtabs %} @@ -390,7 +582,7 @@ You can customize the navigation mode of the date range picker by using the [nav ![navigationMode](images/date-navigations/navigation_mode.gif) >**NOTE** -When the navigation mode is set to [DateRangePickerNavigationMode.scroll](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerNavigationMode.html#scroll). +When the navigation mode is set to [DateRangePickerNavigationMode.scroll](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerNavigationMode.html#scroll): * Swipe selection is not supported when the range and multi-range are the selection modes. * The [onViewChanged](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/onViewChanged.html) will be called when the view reaches the starting position of the date range picker view. * [forward](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/forward.html), [backward](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/backward.html) and [showNavigationArrow](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/showNavigationArrow.html) is not supported. @@ -401,17 +593,30 @@ When the navigation mode is set to [DateRangePickerNavigationMode.scroll](https: Using the [showNavigationArrow](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/showNavigationArrow.html) property of the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) you can move to the next or previous views of the picker without swiping. {% tabs %} -{% highlight dart hl_lines="6" %} +{% highlight dart hl_lines="13" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - showNavigationArrow: true, + return MaterialApp( + home: Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + showNavigationArrow: true, + ), ), ); } +} {% endhighlight %} {% endtabs %} diff --git a/Flutter/DateRangePicker/date-restrictions.md b/Flutter/DateRangePicker/date-restrictions.md index 0fcd62bfa..45232ccd2 100644 --- a/Flutter/DateRangePicker/date-restrictions.md +++ b/Flutter/DateRangePicker/date-restrictions.md @@ -14,17 +14,30 @@ documentation: ug The [minDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/minDate.html) will restrict [backward](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/backward.html) date navigations features, and cannot swipe the control using the touch gesture beyond the min date range in all views. {% tabs %} -{% highlight dart hl_lines="6" %} +{% highlight dart hl_lines="14" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - minDate: DateTime(2020, 03, 05, 10, 0, 0), + return MaterialApp( + home: Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + minDate: DateTime(2020, 03, 05, 10, 0, 0), + ), ), ); } +} {% endhighlight %} {% endtabs %} @@ -34,17 +47,30 @@ The [minDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest The [maxDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/maxDate.html) will restrict [forward](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/forward.html) date navigations features, and cannot swipe the control using the touch gesture beyond the max date range in all views. {% tabs %} -{% highlight dart hl_lines="6" %} +{% highlight dart hl_lines="14" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - maxDate: DateTime(2020, 03, 25, 10, 0, 0), + return MaterialApp( + home: Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + maxDate: DateTime(2020, 03, 25, 10, 0, 0), + ), ), ); } +} {% endhighlight %} {% endtabs %} @@ -56,17 +82,30 @@ The [maxDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) allows you to enable or disable the past dates from today's date in `MonthView`. This can be achieved by changing the [enablePastDates](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/enablePastDates.html) property. By default, the value of this property is set to true. {% tabs %} -{% highlight dart hl_lines="6" %} +{% highlight dart hl_lines="14" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - enablePastDates: false, + return MaterialApp( + home: Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + enablePastDates: false, + ), ), ); } +} {% endhighlight %} {% endtabs %} @@ -75,50 +114,77 @@ The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepic ## Blackout Dates -In [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html), [blackoutDates](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/blackoutDates.html) refer to the disabled dates that restrict the user from selecting it. These dates will be marked with Strikethrough. +In [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html), [blackoutDates](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/blackoutDates.html) refer to the disabled dates that restrict the user from selecting them. These dates will be marked with strikethrough. {% tabs %} -{% highlight dart hl_lines="6" %} +{% highlight dart hl_lines="14 15" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.year, - monthViewSettings: DateRangePickerMonthViewSettings( - blackoutDates: [DateTime(2020, 03, 18), DateTime(2020, 03, 19)], + return MaterialApp( + home: Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + monthViewSettings: const DateRangePickerMonthViewSettings( + blackoutDates: [DateTime(2020, 03, 18), DateTime(2020, 03, 19)], + ), ), ), ); } +} {% endhighlight %} {% endtabs %} -## SelectableDayPredicate +## Selectable day predicate [selectableDayPredicate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectableDayPredicate.html) callback allows certain days for selection. Only the days that [selectableDayPredicate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectableDayPredicate.html) returns `true` will be selectable in the date range picker. {% tabs %} -{% highlight dart hl_lines="4 5 6 7 8 9" %} +{% highlight dart hl_lines="12 13 14 15 16 17" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { - return Scaffold( - body: SafeArea( - child: Card( - child: SfDateRangePicker( - selectableDayPredicate: (DateTime dateTime) { - if (dateTime == DateTime(2021, 9, 5)) { - return false; - } - return true; - }, + return MaterialApp( + home: Scaffold( + body: SafeArea( + child: Card( + child: SfDateRangePicker( + view: DateRangePickerView.month, + selectableDayPredicate: (DateTime dateTime) { + if (dateTime == DateTime(2021, 9, 5)) { + return false; + } + return true; + }, + ), ), ), ), ); } +} {% endhighlight %} {% endtabs %} diff --git a/Flutter/DateRangePicker/getting-started.md b/Flutter/DateRangePicker/getting-started.md index 9eecf193e..97f46954c 100644 --- a/Flutter/DateRangePicker/getting-started.md +++ b/Flutter/DateRangePicker/getting-started.md @@ -11,7 +11,7 @@ documentation: ug This section explains the steps required to add the [date range picker](https://www.syncfusion.com/flutter-widgets/flutter-daterangepicker) widget. This section covers only basic features needed to get started with Syncfusion® date range picker widget. -To get start quickly with our Flutter date range picker widget, you can check on this video. +To get started quickly with our Flutter date range picker widget, you can refer to this video. @@ -24,32 +24,35 @@ Create a simple project using the instructions given in the [Getting Started wit Add the Syncfusion® Flutter date range picker dependency to your `pubspec.yaml` file. -{% highlight dart %} +{% tabs %} +{% highlight yaml %} dependencies: - -syncfusion_flutter_datepicker: ^xx.x.xx + syncfusion_flutter_datepicker: ^xx.x.xx {% endhighlight %} +{% endtabs %} -N> Here **xx.x.xx** denotes the current version of [`Syncfusion Flutter Date Picker`](https://pub.dev/packages/syncfusion_flutter_datepicker/versions) package. +N> Here **xx.x.xx** denotes the current version of [`Syncfusion Flutter Date Picker`](https://pub.dev/packages/syncfusion_flutter_datepicker/versions) package. It is recommended to use the latest available version from pub.dev. **Get packages** Run the following command to get the required packages. -{% highlight dart %} +{% tabs %} +{% highlight bash %} -$ flutter pub get +flutter pub get {% endhighlight %} +{% endtabs %} **Import package** Import the following package in your Dart code. {% tabs %} -{% highlight Dart %} +{% highlight dart %} import 'package:syncfusion_flutter_datepicker/datepicker.dart'; @@ -58,20 +61,33 @@ import 'package:syncfusion_flutter_datepicker/datepicker.dart'; ## Initialize date range picker -After importing the package, initialize the date range picker widget as a child of any widget. Here, the date range picker widget is added as a child of the scaffold widget. +After importing the package, initialize the date range picker widget as a child of any widget. Here, the date range picker widget is added as a child of the `Scaffold` widget. {% tabs %} -{% highlight dart hl_lines="5" %} +{% highlight dart hl_lines="14" %} + +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: Container( - child: SfDateRangePicker() - ) + return MaterialApp( + home: Scaffold( + body: Container( + child: SfDateRangePicker(), + ), + ), ); } - +} + {% endhighlight %} {% endtabs %} @@ -82,16 +98,29 @@ After importing the package, initialize the date range picker widget as a child The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) widget provides four different types of views to display. It can be assigned to the widget constructor by using the [view](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/view.html) 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. {% tabs %} -{% highlight dart hl_lines="5" %} +{% highlight dart hl_lines="13" %} + +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.year - ) + return MaterialApp( + home: Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.year, + ), + ), ); } +} {% endhighlight %} {% endtabs %} @@ -103,19 +132,32 @@ The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepic The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) 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](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/firstDayOfWeek.html) property. {% tabs %} -{% highlight dart hl_lines="6" %} +{% highlight dart hl_lines="15" %} + +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, - monthViewSettings: DateRangePickerMonthViewSettings( - firstDayOfWeek: 1 + return MaterialApp( + home: Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + monthViewSettings: const DateRangePickerMonthViewSettings( + firstDayOfWeek: 1, + ), ), ), ); } +} {% endhighlight %} {% endtabs %} @@ -127,11 +169,17 @@ The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepic The selected date or range details can be obtained using the [onSelectionChanged](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/onSelectionChanged.html) callback of date range picker. The callback will return the [DateRangePickerSelectionChangedArgs](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionChangedArgs-class.html) which contains the selected date or range details. {% tabs %} -{% highlight dart hl_lines="1 2 3 11" %} +{% highlight dart hl_lines="15 16 17 26" %} - void _onSelectionChanged(DateRangePickerSelectionChangedArgs args) { - // TODO: implement your code here - } +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) { @@ -147,6 +195,11 @@ The selected date or range details can be obtained using the [onSelectionChanged ); } + void _onSelectionChanged(DateRangePickerSelectionChangedArgs args) { + // TODO: implement your code here + } +} + {% endhighlight %} {% endtabs %} @@ -158,17 +211,30 @@ You can highlight the today’s date by customizing its color in the date range {% tabs %} -{% highlight dart hl_lines="11" %} +{% highlight dart hl_lines="14" %} + +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, - todayHighlightColor: Colors.green, + return MaterialApp( + home: Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + todayHighlightColor: Colors.green, + ), ), ); } +} {% endhighlight %} {% endtabs %} @@ -177,41 +243,53 @@ You can highlight the today’s date by customizing its color in the date range You can display action buttons at the bottom of the date range picker by using the [showActionButtons](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/showActionButtons.html) property of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html). -* [confirmText](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/confirmText.html) - Customizes the text that display on the confirm button. +* [confirmText](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/confirmText.html) - Customizes the text displayed on the confirm button. -* [cancelText](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/cancelText.html) - Customizes the text that display on the cancel button. +* [cancelText](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/cancelText.html) - Customizes the text displayed on the cancel button. -* [onCancel](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/onCancel.html) - Callback function that is triggered when the cancel button is tapped within a date range picker. +* [onCancel](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/onCancel.html) - Callback function that is triggered when the cancel button is tapped within the date range picker. -* [onSubmit](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/onSubmit.html) - Callback function that is triggered when the confirm button is tapped within a date range picker. +* [onSubmit](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/onSubmit.html) - Callback function that is triggered when the confirm button is tapped within the date range picker. {% tabs %} -{% highlight dart hl_lines="11" %} +{% highlight dart hl_lines="16" %} + +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: TextButton( - child: Text('Show picker'), - onPressed: () { - showDialog( - context: context, - builder: (BuildContext context) { - return SfDateRangePicker( - showActionButtons: true, - onSubmit: (Object value) { - Navigator.pop(context); - }, - onCancel: () { - Navigator.pop(context); - }, - ); - }, - ); - }, + return MaterialApp( + home: Scaffold( + body: TextButton( + child: const Text('Show picker'), + onPressed: () { + showDialog( + context: context, + builder: (BuildContext context) { + return SfDateRangePicker( + showActionButtons: true, + onSubmit: (Object value) { + Navigator.pop(context); + }, + onCancel: () { + Navigator.pop(context); + }, + ); + }, + ); + }, + ), ), ); - } + } {% endhighlight %} {% endtabs %} @@ -220,20 +298,33 @@ You can display action buttons at the bottom of the date range picker by using t ## Today button -The today button can be displayed at the bottom of the date range picker by using the [showTodayButton](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/showTodayButton.html) property of the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html). It easily moves to the current date of the picker view. +The today button can be displayed at the bottom of the date range picker by using the [showTodayButton](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/showTodayButton.html) property of the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html). The today button moves the view to the current date. {% tabs %} -{% highlight dart hl_lines="6" %} +{% highlight dart hl_lines="14" %} + +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, - showTodayButton: true, + return MaterialApp( + home: Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + showTodayButton: true, + ), ), ); } +} {% endhighlight %} {% endtabs %} diff --git a/Flutter/DateRangePicker/headers.md b/Flutter/DateRangePicker/headers.md index dd3c5a532..2e44c2385 100644 --- a/Flutter/DateRangePicker/headers.md +++ b/Flutter/DateRangePicker/headers.md @@ -16,17 +16,30 @@ You can customize the header of the date range picker using the [headerStyle](ht You can customize the height of the header of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) by using the [headerHeight](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/headerHeight.html) property. {% tabs %} -{% highlight dart hl_lines="6" %} +{% highlight dart hl_lines="13" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - headerHeight: 100, + return MaterialApp( + home: Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + headerHeight: 100, + ), ), ); } +} {% endhighlight %} {% endtabs %} @@ -38,25 +51,38 @@ You can customize the height of the header of [SfDateRangePicker](https://pub.de You can customize the header style of the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) by using the [backgroundColor](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerHeaderStyle/backgroundColor.html), [textStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerHeaderStyle/textStyle.html), and [textAlign](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerHeaderStyle/textAlign.html) properties of [DateRangePickerHeaderStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerHeaderStyle-class.html). {% tabs %} -{% highlight dart hl_lines="6 7 8 9 10 11 12 13 14" %} +{% highlight dart hl_lines="14 15 16 17 18 19 20 21 22 23" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - headerStyle: DateRangePickerHeaderStyle( - backgroundColor: Color(0xFF7fcd91), - textAlign: TextAlign.center, - textStyle: TextStyle( - fontStyle: FontStyle.normal, - fontSize: 25, - letterSpacing: 5, - color: Color(0xFFffeaea), + return MaterialApp( + home: Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + headerStyle: const DateRangePickerHeaderStyle( + backgroundColor: Color(0xFF7fcd91), + textAlign: TextAlign.center, + textStyle: TextStyle( + fontStyle: FontStyle.normal, + fontSize: 25, + letterSpacing: 5, + color: Color(0xFFffeaea), + ), ), + ), ), - ), - ); + ); + } } {% endhighlight %} @@ -73,19 +99,32 @@ You can customize the view header of the [SfDateRangePicker](https://pub.dev/doc You can customize the view header height of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) using the [viewHeaderHeight](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/viewHeaderHeight.html) property of [DateRangePickerMonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings-class.html). {% tabs %} -{% highlight dart hl_lines="6 7" %} +{% highlight dart hl_lines="14 15" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - monthViewSettings: DateRangePickerMonthViewSettings( - viewHeaderHeight: 100, + return MaterialApp( + home: Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + monthViewSettings: const DateRangePickerMonthViewSettings( + viewHeaderHeight: 100, + ), ), ), ); } +} {% endhighlight %} {% endtabs %} @@ -97,22 +136,35 @@ You can customize the view header height of [SfDateRangePicker](https://pub.dev/ You can customize the view header style of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) by using the [backgroundColor](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerViewHeaderStyle/backgroundColor.html), [textStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerViewHeaderStyle/textStyle.html) properties of [DateRangePickerViewHeaderStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerViewHeaderStyle-class.html). {% tabs %} -{% highlight dart hl_lines="7 8 9" %} +{% highlight dart hl_lines="16 17 18" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - monthViewSettings: DateRangePickerMonthViewSettings( - viewHeaderStyle: DateRangePickerViewHeaderStyle( - backgroundColor: Color(0xFF7fcd91), - textStyle: TextStyle(fontSize: 20, letterSpacing: 5), + return MaterialApp( + home: Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + monthViewSettings: const DateRangePickerMonthViewSettings( + viewHeaderStyle: DateRangePickerViewHeaderStyle( + backgroundColor: Color(0xFF7fcd91), + textStyle: TextStyle(fontSize: 20, letterSpacing: 5), + ), ), ), ), ); } +} {% endhighlight %} {% endtabs %} @@ -124,17 +176,30 @@ You can customize the view header style of [SfDateRangePicker](https://pub.dev/d You can customize the view header of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) by using the [dayFormat](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/dayFormat.html) property of [DateRangePickerMonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings-class.html). {% tabs %} -{% highlight dart hl_lines="6" %} +{% highlight dart hl_lines="14" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - monthViewSettings: DateRangePickerMonthViewSettings(dayFormat: 'EEE'), + return MaterialApp( + home: Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + monthViewSettings: const DateRangePickerMonthViewSettings(dayFormat: 'EEE'), + ), ), ); } +} {% endhighlight %} {% endtabs %} diff --git a/Flutter/DateRangePicker/hijri-date-picker.md b/Flutter/DateRangePicker/hijri-date-picker.md index 98fc5b2bf..a29cab745 100644 --- a/Flutter/DateRangePicker/hijri-date-picker.md +++ b/Flutter/DateRangePicker/hijri-date-picker.md @@ -7,33 +7,44 @@ control: SfDateRangePicker documentation: ug --- -# Flutter Hijri Date Range Picker Brief (SfHijriDateRangePicker) +# Flutter Hijri Date Range Picker (SfHijriDateRangePicker) Overview Along with the Gregorian calendar, the picker package contains a Hijri date picker to display the Islamic calendar. Islamic calendar or Hijri calendar is a lunar calendar consisting of 12 months in a year of 354 or 355 days. To know more about the Islamic calendar, kindly refer to [Wikipedia](https://en.wikipedia.org/wiki/Islamic_calendar). It consists of all the Gregorian calendar functionalities like min and max date, the first day of the week, different selection modes, RTL, and customization for special dates. -To display the Hijri date picker, initialize the [HijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html) widget as a child of any widget. Here, the Hijri date range picker added as a child of the scaffold widget. +To display the Hijri date picker, initialize the [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html) widget as a child of any widget. Here, the Hijri date range picker is added as a child of the `Scaffold` widget. {% tabs %} -{% highlight dart hl_lines="4" %} +{% highlight dart hl_lines="13" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( - body: SfHijriDateRangePicker() - ) + body: SfHijriDateRangePicker(), + ), ); } +} {% endhighlight %} {% endtabs %} ![Hijri date range picker](images/hijri-picker/hijri_programattic_view_navigation.jpg) ->**NOTE** -* Most of the properties type and classes were same from [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) except the followings [HijriDatePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController-class.html), [HijriDatePickerMonthCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle-class.html), [HijriDatePickerMonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthViewSettings-class.html), [HijriDatePickerViewChangedArgs](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerViewChangedArgs-class.html), [HijriDatePickerYearCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerYearCellStyle-class.html), [HijriDateRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDateRange-class.html) and [HijriDatePickerView](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerView.html). +>**NOTE** +* Most property and class types are the same as [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html), except for the following: [HijriDatePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController-class.html), [HijriDatePickerMonthCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle-class.html), [HijriDatePickerMonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthViewSettings-class.html), [HijriDatePickerViewChangedArgs](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerViewChangedArgs-class.html), [HijriDatePickerYearCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerYearCellStyle-class.html), [HijriDateRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDateRange-class.html) and [HijriDatePickerView](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerView.html). * Use the [HijriDateTime](https://pub.dev/documentation/syncfusion_flutter_core/latest/core/HijriDateTime-class.html) class to define the date for [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html). ## Multiple picker views @@ -41,7 +52,17 @@ To display the Hijri date picker, initialize the [HijriDateRangePicker](https:// The [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html) widget provides three different types of views to display. It can be assigned to the widget constructor by using the [view](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker/view.html) property. The default view of the widget is the month view. By default, the current date will be displayed initially for all the date range picker views. {% tabs %} -{% highlight dart hl_lines="6" %} +{% highlight dart hl_lines="15" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { @@ -51,6 +72,7 @@ The [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_da ), ); } +} {% endhighlight %} {% endtabs %} @@ -59,10 +81,20 @@ The [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_da ## Change first day of week -The [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html) 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](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthViewSettings/firstDayOfWeek.html) property [HijriDatePickerMonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthViewSettings-class.html). +The [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html) 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](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthViewSettings/firstDayOfWeek.html) property of [HijriDatePickerMonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthViewSettings-class.html). {% tabs %} -{% highlight dart hl_lines="7" %} +{% highlight dart hl_lines="16" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { @@ -70,13 +102,14 @@ The [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_da home: Scaffold( body: SfHijriDateRangePicker( view: HijriDatePickerView.month, - monthViewSettings: HijriDatePickerMonthViewSettings( + monthViewSettings: const HijriDatePickerMonthViewSettings( firstDayOfWeek: 1, ), ), ), ); } +} {% endhighlight %} {% endtabs %} @@ -88,7 +121,17 @@ The [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_da Display the Week number of the year in the month view by setting the [showWeekNumber](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthViewSettings/showWeekNumber.html) property of the [HijriDatePickerMonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthViewSettings-class.html) as true, and by default it is false. The Week numbers will be displayed based on the ISO standard. {% tabs %} -{% highlight dart hl_lines="7 8 9" %} +{% highlight dart hl_lines="21" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { @@ -103,6 +146,7 @@ Display the Week number of the year in the month view by setting the [showWeekNu ), ); } +} {% endhighlight %} {% endtabs %} @@ -114,7 +158,17 @@ Display the Week number of the year in the month view by setting the [showWeekNu Customize the Week number style by using the [textStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerWeekNumberStyle/textStyle.html) and the [backgroundColor](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerWeekNumberStyle/backgroundColor.html) properties of the [DateRangePickerWeekNumberStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerWeekNumberStyle-class.html). {% tabs %} -{% highlight dart hl_lines="9 10 11" %} +{% highlight dart hl_lines="23 24 25" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { @@ -133,6 +187,7 @@ Customize the Week number style by using the [textStyle](https://pub.dev/documen ), ); } +} {% endhighlight %} {% endtabs %} @@ -148,24 +203,36 @@ The selected date or range details can be obtained using the [onSelectionChanged {% tabs %} -{% highlight dart hl_lines="12" %} +{% highlight dart hl_lines="25" %} - void _onSelectionChanged(DateRangePickerSelectionChangedArgs args) { - /// TODO: implement your code here - } +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SfHijriDateRangePicker( - view: HijriDatePickerView.month, - selectionMode: DateRangePickerSelectionMode.range, - onSelectionChanged: _onSelectionChanged, - )), + view: HijriDatePickerView.month, + selectionMode: DateRangePickerSelectionMode.range, + onSelectionChanged: _onSelectionChanged, + ), + ), ); } + void _onSelectionChanged(DateRangePickerSelectionChangedArgs args) { + /// TODO: implement your code here + } +} + {% endhighlight %} {% endtabs %} @@ -175,11 +242,37 @@ The selected date or range details can be obtained using the [onSelectionChanged You can programmatically navigate date in the Hijri date picker widget by using the [displayDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController/displayDate.html) property from [HijriDatePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController-class.html). +N> The [HijriDateTime](https://pub.dev/documentation/syncfusion_flutter_core/latest/core/HijriDateTime-class.html) class is used to represent Hijri dates, similar to how [DateTime](https://api.flutter.dev/flutter/dart-core/DateTime-class.html) represents Gregorian dates. + {% tabs %} -{% highlight dart hl_lines="2 6 15" %} +{% highlight dart hl_lines="3 16 25" %} -class MyAppState extends State { - HijriDatePickerController _controller = HijriDatePickerController(); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; +import 'package:syncfusion_flutter_core/core.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: _HijriDisplayDateExample(), + ); + } +} + +class _HijriDisplayDateExample extends StatefulWidget { + @override + State<_HijriDisplayDateExample> createState() => _HijriDisplayDateExampleState(); +} + +class _HijriDisplayDateExampleState extends State<_HijriDisplayDateExample> { + final HijriDatePickerController _controller = HijriDatePickerController(); @override void initState() { @@ -189,12 +282,11 @@ class MyAppState extends State { @override Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: SfHijriDateRangePicker( + return Scaffold( + body: SfHijriDateRangePicker( controller: _controller, view: HijriDatePickerView.month, - )), + ), ); } } @@ -209,10 +301,33 @@ class MyAppState extends State { You can programmatically navigate to any view in the Hijri date picker widget by using the [view](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController/view.html) property of [HijriDatePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController-class.html). {% tabs %} -{% highlight dart hl_lines="2 6 15" %} +{% highlight dart hl_lines="3 16 25" %} -class MyAppState extends State { - HijriDatePickerController _controller = HijriDatePickerController(); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: _HijriViewNavigationExample(), + ); + } +} + +class _HijriViewNavigationExample extends StatefulWidget { + @override + State<_HijriViewNavigationExample> createState() => _HijriViewNavigationExampleState(); +} + +class _HijriViewNavigationExampleState extends State<_HijriViewNavigationExample> { + final HijriDatePickerController _controller = HijriDatePickerController(); @override void initState() { @@ -222,11 +337,10 @@ class MyAppState extends State { @override Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: SfHijriDateRangePicker( + return Scaffold( + body: SfHijriDateRangePicker( controller: _controller, - )), + ), ); } } @@ -244,29 +358,51 @@ For selection [refer](https://help.syncfusion.com/flutter/daterangepicker/select ### Single selection -You can select the date programmatically by using the [selectedDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/selectedDate.html) property of [HijriDatePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController-class.html). It is only applicable when the [selectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker/selectionMode.html) is set to [DateRangePickerSelectionMode.single](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#single). +You can select the date programmatically by using the [selectedDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController/selectedDate.html) property of [HijriDatePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController-class.html). It is only applicable when the [selectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker/selectionMode.html) is set to [DateRangePickerSelectionMode.single](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#single). {% tabs %} -{% highlight dart hl_lines="2 7 16 17" %} +{% highlight dart hl_lines="3 22 23" %} -class MyAppState extends State { - HijriDatePickerController _controller = HijriDatePickerController(); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; +import 'package:syncfusion_flutter_core/core.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: _SingleSelectionExample(), + ); + } +} + +class _SingleSelectionExample extends StatefulWidget { + @override + State<_SingleSelectionExample> createState() => _SingleSelectionExampleState(); +} + +class _SingleSelectionExampleState extends State<_SingleSelectionExample> { + final HijriDatePickerController _controller = HijriDatePickerController(); @override void initState() { _controller.view = HijriDatePickerView.month; - _controller.selectedDate = HijriDateTime.now().add(Duration(days: 1)); + _controller.selectedDate = HijriDateTime.now().add(const Duration(days: 1)); super.initState(); } @override Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: SfHijriDateRangePicker( - selectionMode: DateRangePickerSelectionMode.single, - controller: _controller, - ), + return Scaffold( + body: SfHijriDateRangePicker( + selectionMode: DateRangePickerSelectionMode.single, + controller: _controller, ), ); } @@ -279,34 +415,56 @@ class MyAppState extends State { ### Multi selection -You can select the multiple dates programmatically by using the [selectedDates](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/selectedDates.html) property of [HijriDatePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController-class.html). It is only applicable when the selectionMode is set to [DateRangePickerSelectionMode.multiple](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#multiple). +You can select the multiple dates programmatically by using the [selectedDates](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController/selectedDates.html) property of [HijriDatePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController-class.html). It is only applicable when the selectionMode is set to [DateRangePickerSelectionMode.multiple](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#multiple). {% tabs %} -{% highlight dart hl_lines="2 7 8 9 10 11 12 21 22" %} +{% highlight dart hl_lines="3 22 23 24 25 26 27" %} -class MyAppState extends State { - HijriDatePickerController _controller = HijriDatePickerController(); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; +import 'package:syncfusion_flutter_core/core.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: _MultiSelectionExample(), + ); + } +} + +class _MultiSelectionExample extends StatefulWidget { + @override + State<_MultiSelectionExample> createState() => _MultiSelectionExampleState(); +} + +class _MultiSelectionExampleState extends State<_MultiSelectionExample> { + final HijriDatePickerController _controller = HijriDatePickerController(); @override void initState() { _controller.view = HijriDatePickerView.month; _controller.selectedDates = [ - HijriDateTime.now().add(Duration(days: 2)), - HijriDateTime.now().add(Duration(days: 4)), - HijriDateTime.now().add(Duration(days: 7)), - HijriDateTime.now().add(Duration(days: 11)) + HijriDateTime.now().add(const Duration(days: 2)), + HijriDateTime.now().add(const Duration(days: 4)), + HijriDateTime.now().add(const Duration(days: 7)), + HijriDateTime.now().add(const Duration(days: 11)) ]; super.initState(); } @override Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: SfHijriDateRangePicker( - selectionMode: DateRangePickerSelectionMode.multiple, - controller: _controller, - ), + return Scaffold( + body: SfHijriDateRangePicker( + selectionMode: DateRangePickerSelectionMode.multiple, + controller: _controller, ), ); } @@ -319,15 +477,39 @@ class MyAppState extends State { ### Range selection -You can select the single date range programmatically by using the [selectedRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/selectedRange.html) property of [HijriDatePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController-class.html). It is only applicable when the [selectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker/selectionMode.html) is set to [DateRangePickerSelectionMode.range](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#range). +You can select the single date range programmatically by using the [selectedRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController/selectedRange.html) property of [HijriDatePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController-class.html). It is only applicable when the [selectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker/selectionMode.html) is set to [DateRangePickerSelectionMode.range](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#range). Use the [HijriDateRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDateRange-class.html) to define the date range for the Hijri date picker. {% tabs %} -{% highlight dart hl_lines="2 7 8 17 18" %} +{% highlight dart hl_lines="3 22 23 24 34" %} -class MyAppState extends State { - HijriDatePickerController _controller = HijriDatePickerController(); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; +import 'package:syncfusion_flutter_core/core.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: _RangeSelectionExample(), + ); + } +} + +class _RangeSelectionExample extends StatefulWidget { + @override + State<_RangeSelectionExample> createState() => _RangeSelectionExampleState(); +} + +class _RangeSelectionExampleState extends State<_RangeSelectionExample> { + final HijriDatePickerController _controller = HijriDatePickerController(); @override void initState() { @@ -339,12 +521,10 @@ class MyAppState extends State { @override Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: SfHijriDateRangePicker( - selectionMode: DateRangePickerSelectionMode.range, - controller: _controller, - ), + return Scaffold( + body: SfHijriDateRangePicker( + selectionMode: DateRangePickerSelectionMode.range, + controller: _controller, ), ); } @@ -357,34 +537,56 @@ class MyAppState extends State { ### Multi-range selection -You can select more than one date range programmatically by using the [selectedRanges](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/selectedRanges.html) property of [HijriDatePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController-class.html). It is only applicable when the [selectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker/selectionMode.html) is set to [DateRangePickerSelectionMode.multiRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#multiRange). +You can select more than one date range programmatically by using the [selectedRanges](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController/selectedRanges.html) property of [HijriDatePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController-class.html). It is only applicable when the [selectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker/selectionMode.html) is set to [DateRangePickerSelectionMode.multiRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#multiRange). {% tabs %} -{% highlight dart hl_lines="2 7 8 9 10 11 12 21 22" %} +{% highlight dart hl_lines="3 23 24 25 26 27 28 38" %} -class MyAppState extends State { - HijriDatePickerController _controller = HijriDatePickerController(); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; +import 'package:syncfusion_flutter_core/core.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: _MultiRangeSelectionExample(), + ); + } +} + +class _MultiRangeSelectionExample extends StatefulWidget { + @override + State<_MultiRangeSelectionExample> createState() => _MultiRangeSelectionExampleState(); +} + +class _MultiRangeSelectionExampleState extends State<_MultiRangeSelectionExample> { + final HijriDatePickerController _controller = HijriDatePickerController(); @override void initState() { _controller.view = HijriDatePickerView.month; _controller.selectedRanges = [ - HijriDateRange(HijriDateTime.now().add(Duration(days: 4)), - HijriDateTime.now().add(Duration(days: 9))), - HijriDateRange(HijriDateTime.now().add(Duration(days: 11)), - HijriDateTime.now().add(Duration(days: 16))) + HijriDateRange(HijriDateTime.now().add(const Duration(days: 4)), + HijriDateTime.now().add(const Duration(days: 9))), + HijriDateRange(HijriDateTime.now().add(const Duration(days: 11)), + HijriDateTime.now().add(const Duration(days: 16))) ]; super.initState(); } @override Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: SfHijriDateRangePicker( - selectionMode: DateRangePickerSelectionMode.multiRange, - controller: _controller, - ), + return Scaffold( + body: SfHijriDateRangePicker( + selectionMode: DateRangePickerSelectionMode.multiRange, + controller: _controller, ), ); } diff --git a/Flutter/DateRangePicker/how-to/custom-widget-on-flutterflow.md b/Flutter/DateRangePicker/how-to/custom-widget-on-flutterflow.md index e01458c94..6f1460c46 100644 --- a/Flutter/DateRangePicker/how-to/custom-widget-on-flutterflow.md +++ b/Flutter/DateRangePicker/how-to/custom-widget-on-flutterflow.md @@ -1,13 +1,13 @@ --- layout: post -title: DateRangePicker Widget in FlutterFlow framework | Syncfusion +title: DateRangePicker Widget in FlutterFlow | Syncfusion description: You can learn here all about adding Syncfusion Flutter DateRangePicker ( SfDateRangePicker ) widget in FlutterFlow framework. platform: flutter control: SfDateRangePicker documentation: ug --- -# How to add Syncfusion® DateRangePicker widget in FlutterFlow? +# How to add Syncfusion® DateRangePicker widget in Flutter? ## Overview @@ -22,8 +22,8 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an 1. Navigate to the `Custom Code` section in the left side navigation menu. 2. Click on the `+ Add` button to open a dropdown menu, then select `Widget`. 3. Update the widget name as desired. -4. Click the `View Boilerplate Code` button on the right side, represented by this icon `[]`. -5. A popup will appear with startup code; locate the button labeled ` Copy to Editor` and click on it. +4. Click the `View Boilerplate Code` button on the right side, represented by the `` icon. +5. A popup will appear with boilerplate code; locate the button labeled ` Copy to Editor` and click on it. 6. Save the widget. ![Custom Widget](how-to-section-images/custom-widget.png) @@ -35,7 +35,7 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an ![Version](how-to-section-images/copy-version.png) 3. Paste the copied dependency into the text editor, then click `Refresh` and `Save` it. ->**Note**: The live version of [Syncfusion® Flutter DatePicker](https://pub.dev/packages/syncfusion_flutter_datepicker) has been migrated to the latest version of Flutter SDK. To ensure compatibility, check [FlutterFlow](https://app.flutterflow.io/dashboard)'s current Flutter version and obtain the corresponding version of [Syncfusion® Flutter DatePicker](https://pub.dev/packages/syncfusion_flutter_datepicker) by referring to the [SDK compatibility](https://help.syncfusion.com/flutter/system-requirements#sdk-version-compatibility). +>**Note**: The current version of [Syncfusion® Flutter DatePicker](https://pub.dev/packages/syncfusion_flutter_datepicker) has been migrated to the latest version of Flutter SDK. To ensure compatibility, check [FlutterFlow](https://app.flutterflow.io/dashboard)'s current Flutter version and obtain the corresponding version of [Syncfusion® Flutter DatePicker](https://pub.dev/packages/syncfusion_flutter_datepicker) by referring to the [SDK compatibility](https://help.syncfusion.com/flutter/system-requirements#sdk-version-compatibility). ![Dependency](how-to-section-images/dependency.png) @@ -52,10 +52,10 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an ### Add widget code snippet in code editor -1. Navigate to the [Example](https://pub.dev/packages/syncfusion_flutter_datepicker/example) tab in [Syncfusion® Flutter DatePicker](https://pub.dev/packages/syncfusion_flutter_datepicker) and copy the widget specific codes. +1. Navigate to the [Example](https://pub.dev/packages/syncfusion_flutter_datepicker/example) tab in [Syncfusion® Flutter DatePicker](https://pub.dev/packages/syncfusion_flutter_datepicker) and copy the widget-specific code sample. ![Code](how-to-section-images/code-snippet.png) 2. Paste the copied code sample into the code editor, click `Format Code`, and `Save` it. -![Code snippet](how-to-section-images/Adding-code-snippent.png) +![Code snippet](how-to-section-images/Adding-code-snippet.png) ### Compiling the codes @@ -66,10 +66,13 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an >**Note**: The compilation progress takes 2 to 3 minutes to complete. +>**Troubleshooting**: Common errors include missing imports, version mismatches between the Syncfusion package and Flutter SDK, and incorrect property names. To resolve these, verify that all required imports are present, ensure the package version is compatible with the FlutterFlow Flutter version, and refer to the [SfDateRangePicker API reference](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) for correct property names. + ### Utilizing the custom widget 1. Navigate to `Widget Palette` located in the left side navigation menu. 2. Click on the `Components` tab. 3. Your custom widget will be under `Custom Code Widgets`. Drag and drop the custom widget to your page. +4. To wire the custom widget to FlutterFlow data sources, use the widget's parameters (defined in the custom widget's constructor) and bind them to FlutterFlow state values or data source fields in the right-side properties panel. ![Page](how-to-section-images/page.png) diff --git a/Flutter/DateRangePicker/how-to/how-to-section-images/Adding-code-snippent.png b/Flutter/DateRangePicker/how-to/how-to-section-images/Adding-code-snippet.png similarity index 100% rename from Flutter/DateRangePicker/how-to/how-to-section-images/Adding-code-snippent.png rename to Flutter/DateRangePicker/how-to/how-to-section-images/Adding-code-snippet.png diff --git a/Flutter/DateRangePicker/images/date-navigations/programmatic-range selection.png b/Flutter/DateRangePicker/images/date-navigations/programmatic-range-selection.png similarity index 100% rename from Flutter/DateRangePicker/images/date-navigations/programmatic-range selection.png rename to Flutter/DateRangePicker/images/date-navigations/programmatic-range-selection.png diff --git a/Flutter/DateRangePicker/localization.md b/Flutter/DateRangePicker/localization.md index 707c740d3..bcb899121 100644 --- a/Flutter/DateRangePicker/localization.md +++ b/Flutter/DateRangePicker/localization.md @@ -9,47 +9,64 @@ documentation: ug # Flutter Date Range Picker Localization (SfDateRangePicker) -By default, the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) widget supports US English localizations. You can change other languages by specifying the [MaterialApp](https://api.flutter.dev/flutter/material/MaterialApp-class.html) properties and adding the `flutter_localizations` package to your application. +By default, the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) widget supports US English localizations. You can change to other languages by specifying the [MaterialApp](https://api.flutter.dev/flutter/material/MaterialApp-class.html) properties and adding the `flutter_localizations` package to your application. To use `flutter_localizations`, add the package as a dependency to your `pubspec.yaml` file. -{% highlight dart %} +{% tabs %} +{% highlight yaml %} dependencies: -flutter_localizations: - sdk: flutter + flutter_localizations: + sdk: flutter {% endhighlight %} +{% endtabs %} -Next, import the `flutter_localizations` library and specify [localizationsDelegates](https://api.flutter.dev/flutter/material/MaterialApp/localizationsDelegates.html) and [supportedLocale](https://api.flutter.dev/flutter/material/MaterialApp/supportedLocales.html) for [MaterialApp](https://api.flutter.dev/flutter/material/MaterialApp-class.html). +Next, import the `flutter_localizations` library and specify [localizationsDelegates](https://api.flutter.dev/flutter/material/MaterialApp/localizationsDelegates.html) and [supportedLocales](https://api.flutter.dev/flutter/material/MaterialApp/supportedLocales.html) for [MaterialApp](https://api.flutter.dev/flutter/material/MaterialApp-class.html). {% tabs %} -{% highlight dart hl_lines="6 7 8 9 10 11 12 13 14 15" %} +{% highlight dart hl_lines="16 17 18 19 20 21 22" %} + +import 'package:flutter/material.dart'; +import 'package:flutter_localizations/flutter_localizations.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; - import 'package:flutter_localizations/flutter_localizations.dart'; +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( - localizationsDelegates: [ + localizationsDelegates: const [ GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, ], - supportedLocales: [ - const Locale('zh'), - const Locale('ar'), - const Locale('ja'), + supportedLocales: const [ + Locale('zh'), + Locale('ar'), + Locale('ja'), ], locale: const Locale('zh'), title: 'DateRangePicker Localization', home: Scaffold( - appBar: AppBar(title: Text('Calendar')), + appBar: AppBar(title: const Text('Calendar')), body: SfDateRangePicker(view: DateRangePickerView.month), ), ); } +} {% endhighlight %} {% endtabs %} ![Localization Date Range Picker](images/localization/localization.png) + +## See also + +* [Globalization in Flutter Date Range Picker](https://help.syncfusion.com/flutter/globalization) +* [Right to left in Flutter Date Range Picker](https://help.syncfusion.com/flutter/daterangepicker/right-to-left) diff --git a/Flutter/DateRangePicker/overview.md b/Flutter/DateRangePicker/overview.md index b2bc99cea..f936c8090 100644 --- a/Flutter/DateRangePicker/overview.md +++ b/Flutter/DateRangePicker/overview.md @@ -14,46 +14,46 @@ The Syncfusion® Flutter Date Range Picker is a lightweight widget ## Key features -* **Multiple picker views**: Display month, year, decade, and century views that allow users to easily select and navigate between built-in views. Supports programmatic navigation. +* **Multiple picker views**: Display month, year, decade, and century views that allow users to easily select and navigate between built-in views. Supports programmatic navigation. See [Picker views](https://help.syncfusion.com/flutter/daterangepicker/views). ![Multiple picker views Date Range Picker](images/overview/picker_views.png) - -* **Multi-date picker view**: Display two Date Range Pickers side by side, allowing you to select ranges of dates within two separate months easily. - ![Multi date picker view Date Range Picker](images/overview/multi-date-picker.png) +* **Multi-date picker view**: Display two Date Range Pickers side by side, allowing you to select ranges of dates within two separate months easily. See [Multi-date picker view](https://help.syncfusion.com/flutter/daterangepicker/views#multi-date-picker-view). -* **Quick navigation**: Navigate back and forth between date-range views and different view modes. + ![Multi date picker view Date Range Picker](images/overview/multi-date-picker.png) -* **Enable/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. +* **Quick navigation**: Navigate back and forth between date-range views and different view modes. See [Date navigation](https://help.syncfusion.com/flutter/daterangepicker/date-navigations). - ![Range selection Date Range Picker](images/overview/range-selection.png) +* **Enable/disable built-in view switching**: Restrict users from navigating to different picker views by disabling view switching. With view switching disabled, you can select cells directly in year, decade, and century views. See [Allow view navigation](https://help.syncfusion.com/flutter/daterangepicker/date-navigations#allow-view-navigation). -* **Date selection**: Select single, multiple, and range of dates. It also supports programmatic selection. + ![Range selection Date Range Picker](images/overview/range-selection.png) - ![Date selection Date Range Picker](images/overview/selection_mode.png) +* **Date selection**: Select single, multiple, and range of dates. It also supports programmatic selection. See [Selection](https://help.syncfusion.com/flutter/daterangepicker/selections). -* **Limit the date selection range**: Select only a date range with a specific minimum and maximum number of days (span of days) by setting the minimum and maximum days options. + ![Date selection Date Range Picker](images/overview/selection_mode.png) - ![Limit the date selection range Date Range Picker](images/overview/min_max_date.png) +* **Limit the date selection range**: Select only a date range with a specific minimum and maximum number of days (span of days) by setting the minimum and maximum days options. See [Date restrictions](https://help.syncfusion.com/flutter/daterangepicker/date-restrictions). -* **Change first day of week**: Customize the first day of the week as needed. The default first day is Sunday. + ![Limit the date selection range Date Range Picker](images/overview/min_max_date.png) -* **Blackout dates**: Disable any date to make it inactive in a date range picker. Easily prevent the selection of weekends by disabling them. +* **Change first day of week**: Customize the first day of the week as needed. The default first day is Sunday. See [Customizations](https://help.syncfusion.com/flutter/daterangepicker/customizations). + +* **Blackout dates**: Disable any date to make it inactive in a date range picker. You can easily prevent the selection of weekends by adding them as blackout dates. See [Blackout dates](https://help.syncfusion.com/flutter/daterangepicker/date-restrictions#blackout-dates). ![Blackout dates Date Range Picker](images/overview/blackoutdates.png) -* **Highlight holidays and weekends**: Highlight any date or every weekend in a month as special days using decoration in Flutter date range picker. +* **Highlight holidays and weekends**: Highlight any date or every weekend in a month as special days using decoration in Flutter date range picker. See [Customizations](https://help.syncfusion.com/flutter/daterangepicker/customizations). - ![Highlight holidays and weekends Date Range Picker](images/overview/customization.png) + ![Highlight holidays and weekends Date Range Picker](images/overview/customization.png) -* **Appearance customization**: Change the look and feel of the date range picker by customizing its default appearance and style using Flutter decorations. +* **Appearance customization**: Change the look and feel of the date range picker by customizing its default appearance and style using Flutter decorations. See [Customizations](https://help.syncfusion.com/flutter/daterangepicker/customizations). -* **Right to left (RTL)** - Right-to-left direction support for users working in RTL languages like Hebrew and Arabic. +* **Right to left (RTL)**: Right-to-left direction support for users working in RTL languages like Hebrew and Arabic. See [Right to left](https://help.syncfusion.com/flutter/daterangepicker/right-to-left). - ![Right to left Date Range Picker](images/overview/right_to_left.png) + ![Right to left Date Range Picker](images/overview/right_to_left.png) -* **Accessibility** - Easy access of the date range picker by screen readers. +* **Accessibility**: Easy access of the date range picker by screen readers. See [Accessibility](https://help.syncfusion.com/flutter/daterangepicker/accessibility). -* **Globalization** - Display the current date and time by following the globalized date and time formats. +* **Globalization**: Display the current date and time by following the globalized date and time formats. See [Localization](https://help.syncfusion.com/flutter/daterangepicker/localization). ![Globalization Date Range Picker](images/overview/localization.png) diff --git a/Flutter/DateRangePicker/right-to-left.md b/Flutter/DateRangePicker/right-to-left.md index 6d341aac4..b08f69c7e 100644 --- a/Flutter/DateRangePicker/right-to-left.md +++ b/Flutter/DateRangePicker/right-to-left.md @@ -9,29 +9,42 @@ documentation: ug # Right to Left (RTL) in Flutter Date Range Picker (SfDateRangePicker) -[SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) supports Right to left rendering and all the date picker elements rendering direction will be changed. +[SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) supports right-to-left rendering; all elements will be rendered in the right-to-left direction. ## RTL rendering ways -Right to left rendering can be switched in the following ways: +Right-to-left rendering can be switched in the following ways: ### Wrapping the SfDateRangePicker with Directionality widget The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) supports changing the layout direction of the widget in the right-to-left direction by using the [Directionality](https://api.flutter.dev/flutter/widgets/Directionality-class.html) widget and setting the [textDirection](https://api.flutter.dev/flutter/dart-ui/TextDirection.html) property as [TextDirection.rtl](https://api.flutter.dev/flutter/dart-ui/TextDirection.html#rtl). {% tabs %} -{% highlight dart hl_lines="7 8" %} +{% highlight dart hl_lines="17 18" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { - return Scaffold( - appBar: AppBar(title: Text('Right to Left')), - body: Directionality( - textDirection: TextDirection.rtl, - child: SfDateRangePicker(view: DateRangePickerView.month), + return MaterialApp( + home: Scaffold( + appBar: AppBar(title: const Text('Right to Left')), + body: Directionality( + textDirection: TextDirection.rtl, + child: SfDateRangePicker(view: DateRangePickerView.month), + ), ), ); } +} {% endhighlight %} {% endtabs %} @@ -43,21 +56,32 @@ The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepic To change the date range picker rendering direction from right to left, change the locale to any of the RTL languages such as Arabic, Persian, Hebrew, Pashto, and Urdu. {% tabs %} -{% highlight dart hl_lines="4 5 6 7 8 9 10 11 12 13" %} +{% highlight dart hl_lines="16 17 18 19 20 21 22 23 24 25" %} + +import 'package:flutter/material.dart'; +import 'package:flutter_localizations/flutter_localizations.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( - localizationsDelegates: [ + localizationsDelegates: const [ GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, ], - supportedLocales: [ + supportedLocales: const [ Locale('en'), Locale('ar'), // ... other locales the app supports ], - locale: Locale('ar'), + locale: const Locale('ar'), home: Scaffold( body: SfDateRangePicker( //... @@ -65,27 +89,11 @@ To change the date range picker rendering direction from right to left, change t ), ); } - +} + {% endhighlight %} {% endtabs %} ## RTL supported date range picker elements -Right to left rendering is supported for all the elements in the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html). - -{% tabs %} -{% highlight dart hl_lines="7 8" %} - - @override - Widget build(BuildContext context) { - return Scaffold( - appBar: AppBar(title: Text('Right to Left')), - body: Directionality( - textDirection: TextDirection.rtl, - child: SfDateRangePicker(view: DateRangePickerView.month), - ), - ); - } - -{% endhighlight %} -{% endtabs %} \ No newline at end of file +Right-to-left rendering is supported for all the elements in the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html). The calendar header, view header, month cells, year/decade/century cells, navigation arrows, today button, and selection view all render in the right-to-left direction. diff --git a/Flutter/DateRangePicker/selections.md b/Flutter/DateRangePicker/selections.md index 1181d5e3e..fef734b72 100644 --- a/Flutter/DateRangePicker/selections.md +++ b/Flutter/DateRangePicker/selections.md @@ -9,26 +9,39 @@ documentation: ug # Flutter Date Range Picker Selections (SfDateRangePicker) -Dates can be selected by touching the month view cells. The default [selectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionMode.html) is Single that allows the user to select one date at a time. [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) provides support to select dates in five modes such as [Single](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#single), [Multiple](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#multiple), [Range](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#range) [MultiRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#multiRange) and [ExtendableRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#extendableRange) selection +Dates can be selected by touching the month view cells. The default [selectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionMode.html) is Single that allows the user to select one date at a time. [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) provides support to select dates in five modes such as [Single](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#single), [Multiple](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#multiple), [Range](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#range), [MultiRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#multiRange), and [ExtendableRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#extendableRange) selection. The ExtendableRange mode allows you to extend an existing selected range by tapping on a new date. >**NOTE** When the [allowViewNavigation](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/allowViewNavigation.html) property is set to `false`, the Date range picker allows you to select the cells in the year, decade, and century views of date range picker. ## Single selection - A [single](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#single) date range picker cell can be selected in a date range picker view by setting the [DateRangePickerSelectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html) to [single](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#single). +A single date can be selected in the date range picker view by setting the [DateRangePickerSelectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html) to [single](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#single). {% tabs %} -{% highlight dart hl_lines="6" %} +{% highlight dart hl_lines="14" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - selectionMode: DateRangePickerSelectionMode.single, + return MaterialApp( + home: Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + selectionMode: DateRangePickerSelectionMode.single, + ), ), ); } +} {% endhighlight %} {% endtabs %} @@ -48,17 +61,30 @@ Dates can be selected by touching the month view cells. The default [selectionMo You can randomly select more than one date range picker cell by setting the [DateRangePickerSelectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html) to [multiple](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#multiple). By clicking again you can deselect the selected cells. {% tabs %} -{% highlight dart hl_lines="6" %} +{% highlight dart hl_lines="14" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - selectionMode: DateRangePickerSelectionMode.multiple, + return MaterialApp( + home: Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + selectionMode: DateRangePickerSelectionMode.multiple, + ), ), ); } +} {% endhighlight %} {% endtabs %} @@ -70,17 +96,30 @@ You can randomly select more than one date range picker cell by setting the [Dat You can select a range of cells in any date range picker view by setting the [DateRangePickerSelectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html) to the [range](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#range). {% tabs %} -{% highlight dart hl_lines="6" %} +{% highlight dart hl_lines="14" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - selectionMode: DateRangePickerSelectionMode.range, + return MaterialApp( + home: Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + selectionMode: DateRangePickerSelectionMode.range, + ), ), ); } +} {% endhighlight %} {% endtabs %} @@ -100,17 +139,30 @@ You can select a range of cells in any date range picker view by setting the [Da You can select more than one range of cells in any of the date range picker views by setting the [DateRangePickerSelectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html) to the [multiRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#multiRange). {% tabs %} -{% highlight dart hl_lines="6" %} +{% highlight dart hl_lines="14" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - selectionMode: DateRangePickerSelectionMode.multiRange, + return MaterialApp( + home: Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + selectionMode: DateRangePickerSelectionMode.multiRange, + ), ), ); } +} {% endhighlight %} {% endtabs %} @@ -122,7 +174,17 @@ You can select more than one range of cells in any of the date range picker view Extend the selected range with the new selected date in any date range picker view by setting the [DateRangePickerSelectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html) to [extendableRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#extendableRange). {% tabs %} -{% highlight dart hl_lines="7" %} +{% highlight dart hl_lines="15" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { @@ -135,6 +197,7 @@ Extend the selected range with the new selected date in any date range picker vi ), ); } +} {% endhighlight %} {% endtabs %} @@ -144,13 +207,23 @@ Extend the selected range with the new selected date in any date range picker vi >**NOTE** * The hovering effect which occurs while extending the range will not be displayed when the `DateRangePickerNavigationMode` is set as `DateRangePickerNavigationMode.scroll`. -## Extendable range selection Direction +## Extendable range selection direction -It allows to extend the selection direction by using the [extendableRangeSelectionDirection](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/extendableRangeSelectionDirection.html) property of the DateRangePicker. -You can set the extendable range selection direction as forward, backward, both and none. +It allows you to extend the selection direction by using the [extendableRangeSelectionDirection](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/extendableRangeSelectionDirection.html) property of the DateRangePicker. +You can set the extendable range selection direction as forward, backward, both and none. See the [ExtendableRangeSelectionDirection](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/ExtendableRangeSelectionDirection.html) enum API reference. {% tabs %} -{% highlight dart hl_lines="8 9" %} +{% highlight dart hl_lines="15 16" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { @@ -165,6 +238,7 @@ You can set the extendable range selection direction as forward, backward, both ), ); } +} {% endhighlight %} {% endtabs %} @@ -179,17 +253,30 @@ You can set the extendable range selection direction as forward, backward, both Customize the radius of the selection using the [selectionRadius](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionRadius.html) property of the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html). {% tabs %} -{% highlight dart hl_lines="6" %} +{% highlight dart hl_lines="14" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - selectionRadius: 10, + return MaterialApp( + home: Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + selectionRadius: 10, + ), ), ); } +} {% endhighlight %} {% endtabs %} @@ -201,17 +288,30 @@ Customize the radius of the selection using the [selectionRadius](https://pub.de You can customize the selection shape of the selected date using the [selectionShape](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionShape.html) property of the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html). {% tabs %} -{% highlight dart hl_lines="6" %} +{% highlight dart hl_lines="14" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - selectionShape: DateRangePickerSelectionShape.rectangle, + return MaterialApp( + home: Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + selectionShape: DateRangePickerSelectionShape.rectangle, + ), ), ); } +} {% endhighlight %} {% endtabs %} @@ -223,20 +323,33 @@ You can customize the selection shape of the selected date using the [selectionS Using the [enableSwipeSelection](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/enableSwipeSelection.html) property of the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html), you can select the dates by using swiping. By default, [enableSwipeSelection](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/enableSwipeSelection.html) property is set to `true`. {% tabs %} -{% highlight dart hl_lines="7 8" %} +{% highlight dart hl_lines="15 16" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - selectionMode: DateRangePickerSelectionMode.range, - monthViewSettings: DateRangePickerMonthViewSettings( - enableSwipeSelection: false, + return MaterialApp( + home: Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + selectionMode: DateRangePickerSelectionMode.range, + monthViewSettings: const DateRangePickerMonthViewSettings( + enableSwipeSelection: false, + ), ), ), ); } +} {% endhighlight %} {% endtabs %} @@ -246,17 +359,30 @@ Using the [enableSwipeSelection](https://pub.dev/documentation/syncfusion_flutte You can deselect the selected date using the [toggleDaySelection](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/toggleDaySelection.html) property of the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html). {% tabs %} -{% highlight dart hl_lines="6" %} +{% highlight dart hl_lines="14" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - toggleDaySelection: true, + return MaterialApp( + home: Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + toggleDaySelection: true, + ), ), ); } +} {% endhighlight %} {% endtabs %} diff --git a/Flutter/DateRangePicker/views.md b/Flutter/DateRangePicker/views.md index f60766970..a11eb9d29 100644 --- a/Flutter/DateRangePicker/views.md +++ b/Flutter/DateRangePicker/views.md @@ -2,7 +2,7 @@ layout: post title: Views in Flutter Date Range Picker widget | Syncfusion description: Learn here all about Views feature of Syncfusion Flutter Date Range Picker (SfDateRangePicker) widget and more. -platform: Flutter +platform: flutter control: SfDateRangePicker documentation: ug --- @@ -16,16 +16,29 @@ The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepic This view displays the entire dates of a particular month. By default, the current month will be displayed on loading. The current date is provided with a separate color different from the rest of the dates color in `month view`. {% tabs %} -{% highlight dart hl_lines="5" %} +{% highlight dart hl_lines="13" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month - ) + return MaterialApp( + home: Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + ), + ), ); } +} {% endhighlight %} {% endtabs %} @@ -33,11 +46,21 @@ This view displays the entire dates of a particular month. By default, the curre ![Month view Date Range Picker](images/views/monthview.png) -#### Week number +### Week number -Display the Week number of the year in the MonthView by setting the [showWeekNumber](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/showWeekNumber.html) property of the [DateRangePickerMonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings-class.html) as true, and by default it is false. Week numbers will be displayed based on the ISO standard. +Display the Week number of the year in the MonthView by setting the [showWeekNumber](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/showWeekNumber.html) property of the [DateRangePickerMonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings-class.html) as true, and by default it is false. Week numbers will be displayed based on the ISO 8601 standard. {% tabs %} -{% highlight dart hl_lines="7 8 9" %} +{% highlight dart hl_lines="15 16 17" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { @@ -52,18 +75,29 @@ Display the Week number of the year in the MonthView by setting the [showWeekNum ), ); } +} {% endhighlight %} {% endtabs %} -![Week Number in Flutter Date Range Picker](images\views\flutter-date-range-picker-week-number.png) +![Week Number in Flutter Date Range Picker](images/views/flutter-date-range-picker-week-number.png) -#### Week number appearance +### Week number appearance Customize the Week number style by using the [textStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerWeekNumberStyle/textStyle.html) and the [backgroundColor](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerWeekNumberStyle/backgroundColor.html) properties of the [DateRangePickerWeekNumberStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerWeekNumberStyle-class.html). {% tabs %} -{% highlight dart hl_lines="8 9 10 11" %} +{% highlight dart hl_lines="16 17 18 19" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { @@ -82,6 +116,7 @@ Customize the Week number style by using the [textStyle](https://pub.dev/documen ), ); } +} {% endhighlight %} {% endtabs %} @@ -91,19 +126,32 @@ Customize the Week number style by using the [textStyle](https://pub.dev/documen ## Year view -This displays the entire month of a particular year. By default, the current year will be displayed on loading. Navigate between the months quickly by selecting the particular month in a `year view`. +This displays all months of a particular year. By default, the current year will be displayed on loading. Navigate between the months quickly by selecting the particular month in a `year view`. {% tabs %} -{% highlight dart hl_lines="5" %} +{% highlight dart hl_lines="13" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.year - ) + return MaterialApp( + home: Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.year, + ), + ), ); } +} {% endhighlight %} {% endtabs %} @@ -112,19 +160,32 @@ This displays the entire month of a particular year. By default, the current yea ## Decade view -This view displays the period of 10 years. By default, the current year range of 10 years will be displayed on loading. You can easily navigate between month/year view to decade view by tapping the calendar header. The year can be navigated quickly by selecting a particular year from a `decade view`. +This view displays a period of 10 years. By default, the current year range of 10 years will be displayed on loading. You can easily navigate between month/year view to decade view by tapping the calendar header. The year can be navigated quickly by selecting a particular year from a `decade view`. {% tabs %} -{% highlight dart hl_lines="5" %} +{% highlight dart hl_lines="13" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.decade - ) + return MaterialApp( + home: Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.decade, + ), + ), ); } +} {% endhighlight %} {% endtabs %} @@ -133,19 +194,32 @@ This view displays the period of 10 years. By default, the current year range of ## Century view -This view displays the period of 100 years. By default, the current year range of 100 years will be displayed on loading. You can easily navigate between month/year/decade view to century view by tapping the calendar header. You can easily navigate to a decade view by selecting decade years in `century view`. +This view displays a period of 100 years. By default, the current year range of 100 years will be displayed on loading. You can easily navigate between month/year/decade view to century view by tapping the calendar header. You can easily navigate to a decade view by selecting decade years in `century view`. {% tabs %} -{% highlight dart hl_lines="5" %} +{% highlight dart hl_lines="13" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.century - ) + return MaterialApp( + home: Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.century, + ), + ), ); } +} {% endhighlight %} {% endtabs %} @@ -157,31 +231,54 @@ This view displays the period of 100 years. By default, the current year range o The number of weeks in the month view can be customized by setting the [numberOfWeeksInView](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/numberOfWeeksInView.html) property of [DateRangePickerMonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings-class.html). {% tabs %} -{% highlight dart hl_lines="6 7" %} +{% highlight dart hl_lines="14 15" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - monthViewSettings: DateRangePickerMonthViewSettings( - numberOfWeeksInView: 2, + return MaterialApp( + home: Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + monthViewSettings: const DateRangePickerMonthViewSettings( + numberOfWeeksInView: 2, + ), ), ), ); } +} {% endhighlight %} {% endtabs %} -![Century view Date Range Picker](images/views/numberofweek-in-view.png) +![Week view Date Range Picker](images/views/numberofweek-in-view.png) ## Multi-date picker view -You can enable a multi-date range picker by using the [enableMultiView](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/enableMultiView.html) property of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html), which displays two date range pickers side by side, the space between the two date-range picker can be customized by using the [viewSpacing](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/viewSpacing.html) property of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html). +You can enable a multi-date range picker by using the [enableMultiView](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/enableMultiView.html) property of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html), which displays two date range pickers side by side, the space between the two date-range picker can be customized by using the [viewSpacing](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/viewSpacing.html) property of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html). The default value of `viewSpacing` is `20`. {% tabs %} -{% highlight dart hl_lines="6" %} +{% highlight dart hl_lines="15 16 17 18" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { @@ -190,8 +287,8 @@ You can enable a multi-date range picker by using the [enableMultiView](https:// body: SfDateRangePicker( enableMultiView: true, viewSpacing: 20, - headerStyle: DateRangePickerHeaderStyle( - textAlign: TextAlign.center + headerStyle: const DateRangePickerHeaderStyle( + textAlign: TextAlign.center, ), ), ), @@ -205,10 +302,20 @@ You can enable a multi-date range picker by using the [enableMultiView](https:// ## Vertical picker -You can arrange the two date range picker views in the vertical direction by setting the [navigationDirection](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/navigationDirection.html) as [DateRangePickerNavigationDirection.vertical](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerNavigationDirection.html#vertical) in the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html).` +You can arrange the two date range picker views in the vertical direction by setting the [navigationDirection](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/navigationDirection.html) as [DateRangePickerNavigationDirection.vertical](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerNavigationDirection.html#vertical) in the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html). {% tabs %} -{% highlight dart hl_lines="7" %} +{% highlight dart hl_lines="15" %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); @override Widget build(BuildContext context) { @@ -222,6 +329,7 @@ You can arrange the two date range picker views in the vertical direction by set ), ); } +} {% endhighlight %} {% endtabs %}