Add extra customization options for datepicker component

- Option to customize icons to scroll to next anmd previous month
- Option to change formatting on weekdays/month (caps/no caps)

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 2.3.1
+
+- Added extra customization options for datetimepicker (Customizable buttons, text formatting for weekday and month)
+
 ## 2.3.0
 
 - Added availability of datetimepicker without button

example/lib/main.dart

@@ -44,32 +44,37 @@ class DatePickerDemo extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     // set locale to Dutch
-    const dateTimePickerTheme = DateTimePickerTheme(
-      dateBoxShape: DateBoxShape.roundedRectangle,
+    DateTimePickerTheme dateTimePickerTheme = DateTimePickerTheme(
+      dateFormatWeekday: (value) =>
+          value[0].toUpperCase() + value.substring(1).toLowerCase(),
+      dateFormatMonth: (value) => value.toUpperCase(),
+      prevIcon: (context) => const Icon(Icons.chevron_left_sharp),
+      nextIcon: (context) => const Icon(Icons.chevron_right_sharp),
+      dateBoxShape: DateBoxShape.circle,
       backgroundColor: Colors.white,
       markedIndicatorColor: Colors.red,
-      baseTheme: DateBoxBaseTheme(
+      baseTheme: const DateBoxBaseTheme(
         Colors.white,
         TextStyle(color: Colors.black),
       ),
-      selectedTheme: DateBoxSelectedTheme(
+      selectedTheme: const DateBoxSelectedTheme(
         Color(0x4BF44336),
         TextStyle(
-          color: Colors.red,
+          color: Colors.black,
         ),
       ),
-      highlightTheme: DateBoxHighlightTheme(
+      highlightTheme: const DateBoxHighlightTheme(
         Colors.red,
         TextStyle(
           color: Colors.white,
         ),
       ),
-      barTheme: DateTimePickerBarTheme(
-        barColor: Colors.black,
+      barTheme: const DateTimePickerBarTheme(
+          barColor: Colors.pinkAccent,
           barOpacity: 1,
-      ),
-      paginationSize: 50,
-      shapeBorder: ArrowedBorder(),
+          textStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
+      paginationSize: 25,
+      shapeBorder: const ArrowedBorder(),
     );
 
     return Scaffold(
@@ -139,7 +144,7 @@ class DatePickerDemo extends StatelessWidget {
                     return IconButton(
                         onPressed: onPressed, icon: const Icon(Icons.minimize));
                   },
-                )
+                ),
               ],
             ),
           ),

example/pubspec.lock

@@ -68,7 +68,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "2.2.3"
+    version: "2.3.1"
   flutter_lints:
     dependency: "direct dev"
     description:

lib/src/models/date_time_picker_theme.dart

@@ -9,6 +9,10 @@ class DateTimePickerTheme {
   /// The [DateTimePickerTheme] to style [DragDownDateTimePicker] in. Define a custom shape for the dates and specifically style
   /// a basic, highlighted, selected and disabled date.
   const DateTimePickerTheme({
+    this.prevIcon,
+    this.nextIcon,
+    this.dateFormatMonth,
+    this.dateFormatWeekday,
     this.paginationSize = 25,
     this.weekDateBoxSize = 35,
     this.monthDateBoxSize = 45,
@@ -87,4 +91,14 @@ class DateTimePickerTheme {
 
   /// If true the first letters of the weekdays will be displayed above the days of the month
   final bool monthWeekDayHeaders;
+
+  /// This function allows you to change formatting of the month-text
+  final String Function(String date)? dateFormatMonth;
+
+  /// This function allows you to change formatting of weekday-text
+  final String Function(String date)? dateFormatWeekday;
+
+  final WidgetBuilder? nextIcon;
+
+  final WidgetBuilder? prevIcon;
 }

lib/src/widgets/overlay_date_time_picker/date_picker.dart

@@ -54,6 +54,11 @@ class DatePicker extends StatelessWidget {
             child: Row(
               children: List.generate(DateTime.daysPerWeek, (index) {
                 DateFormat dateFormatter = DateFormat("EE");
+                var date = dateFormatter.format(DateTime(2022, 11, index));
+                if (theme.dateFormatWeekday != null) {
+                  date = theme.dateFormatWeekday!
+                      .call(dateFormatter.format(DateTime(2022, 11, index)));
+                }
                 return Expanded(
                   child: Center(
                     child: Padding(
@@ -61,7 +66,7 @@ class DatePicker extends StatelessWidget {
                       child: Text(
                         // The first day in November 2022 is monday
                         // We use it to properly show monday as the first day and sunday as the last one
-                        dateFormatter.format(DateTime(2022, 11, index)),
+                        date,
                         style: textStyle.copyWith(fontWeight: FontWeight.bold),
                       ),
                     ),

lib/src/widgets/overlay_date_time_picker/overlay.dart

@@ -71,6 +71,18 @@ class _OverlayDateTimeContentState extends State<OverlayDateTimeContent> {
 
   @override
   Widget build(BuildContext context) {
+    var monthText = DateFormat.yMMMM().format(
+      widget.controller.browsingDate,
+    );
+    if (widget.theme.dateFormatMonth != null) {
+      monthText = widget.theme.dateFormatMonth!.call(monthText);
+    }
+
+    Widget nextIcon = widget.theme.nextIcon?.call(context) ??
+        const Icon(Icons.arrow_circle_right_outlined);
+    Widget prevIcon = widget.theme.prevIcon?.call(context) ??
+        const Icon(Icons.arrow_circle_left_outlined);
+
     return Column(
       mainAxisSize: MainAxisSize.min,
       children: [
@@ -88,14 +100,12 @@ class _OverlayDateTimeContentState extends State<OverlayDateTimeContent> {
                         (widget.dateTimeConstraint.inMonthRange(previousDate))
                             ? _goToPreviousPage
                             : null,
-                    icon: const Icon(Icons.arrow_circle_left_outlined),
+                    icon: prevIcon,
                     color: widget.theme.barTheme.barColor,
                     iconSize: widget.theme.paginationSize,
                   ),
             Text(
-              DateFormat.yMMMM().format(
-                widget.controller.browsingDate,
-              ),
+              monthText,
               style: widget.theme.barTheme.textStyle,
             ),
             (widget.onNextPageButtonChild != null)
@@ -109,7 +119,7 @@ class _OverlayDateTimeContentState extends State<OverlayDateTimeContent> {
                         (widget.dateTimeConstraint.inMonthRange(nextDate))
                             ? _goToNextPage
                             : null,
-                    icon: const Icon(Icons.arrow_circle_right_outlined),
+                    icon: nextIcon,
                     color: widget.theme.barTheme.barColor,
                     iconSize: widget.theme.paginationSize,
                   ),

pubspec.yaml

@@ -1,6 +1,6 @@
 name: flutter_date_time_picker
 description: A Flutter package for date and time picker.
-version: 2.3.0
+version: 2.3.1
 homepage: https://iconica.nl/
 
 environment: