reactive_date_range_picker 2.3.0

vasilich6107 · vasilich6107 · commit 509f60643c50 · 2025-03-08T16:47:16.000+01:00
diff --git a/packages/reactive_date_range_picker/CHANGELOG.md b/packages/reactive_date_range_picker/CHANGELOG.md
@@ -1,3 +1,8 @@
+## [2.3.0]
+
+* onTap for custom calendars support
+* valueBuilder
+
 ## [2.2.0]
 
 * mouse cursor
diff --git a/packages/reactive_date_range_picker/example/lib/main.dart b/packages/reactive_date_range_picker/example/lib/main.dart
@@ -1,3 +1,4 @@
+import 'package:calendar_date_picker2/calendar_date_picker2.dart';
 import 'package:flutter/material.dart';
 import 'package:reactive_date_range_picker/reactive_date_range_picker.dart';
 import 'package:reactive_forms/reactive_forms.dart';
@@ -60,6 +61,22 @@ class MyApp extends StatelessWidget {
                         suffixIcon: Icon(Icons.calendar_today),
                       ),
                     ),
+                    ReactiveDateRangePicker(
+                      formControlName: 'dateRange',
+                      decoration: const InputDecoration(
+                        labelText: 'Date Range',
+                        hintText: 'hintText',
+                        border: OutlineInputBorder(),
+                        helperText: 'helperText',
+                        suffixIcon: Icon(Icons.calendar_today),
+                      ),
+                      onTap: (context, value) async {
+                        return await showDateRangePicker(
+                          context,
+                          value: value,
+                        );
+                      },
+                    ),
                     ElevatedButton(
                       child: const Text('Sign Up'),
                       onPressed: () {
@@ -81,3 +98,111 @@ class MyApp extends StatelessWidget {
     );
   }
 }
+
+Future<DateTimeRange?> showDateRangePicker(
+  BuildContext context, {
+  DateTime? firstDate,
+  DateTime? lastDate,
+  DateTime? currentDate,
+  DateTimeRange? value,
+}) async {
+  final selectedDates = await _showCalendarDatePicker2Dialog(
+    context,
+    calendarType: CalendarDatePicker2Type.range,
+    currentDate: currentDate,
+    firstDate: firstDate,
+    lastDate: lastDate,
+    value: [value?.start, value?.end],
+  );
+
+  if (selectedDates == null || selectedDates.isEmpty) return value;
+
+  return DateTimeRange(
+    start: selectedDates[0] ?? DateTime.now(),
+    end: selectedDates[selectedDates.length == 1 ? 0 : 1] ?? DateTime.now(),
+  );
+}
+
+Future<List<DateTime?>?> _showCalendarDatePicker2Dialog(
+  BuildContext context, {
+  required CalendarDatePicker2Type calendarType,
+  List<DateTime?> value = const [],
+  DateTime? firstDate,
+  DateTime? lastDate,
+  DateTime? currentDate,
+}) async {
+  return showCalendarDatePicker2Dialog(
+    value: value,
+    context: context,
+    config: getCalendarConfig(
+      context,
+      calendarType: calendarType,
+      firstDate: firstDate,
+      lastDate: lastDate,
+      currentDate: currentDate,
+    ),
+    dialogSize: const Size(360, 400),
+    borderRadius: BorderRadius.circular(16),
+    dialogBackgroundColor: Colors.white,
+  );
+}
+
+CalendarDatePicker2WithActionButtonsConfig getCalendarConfig(
+  BuildContext context, {
+  CalendarDatePicker2Type calendarType = CalendarDatePicker2Type.single,
+  DateTime? firstDate,
+  DateTime? lastDate,
+  DateTime? currentDate,
+}) {
+  final primaryColor = Theme.of(context).primaryColor;
+
+  const dayTextStyle = TextStyle(
+    fontWeight: FontWeight.w700,
+  );
+
+  final firstDay = firstDate?.startOfDay();
+  final lastDay = lastDate?.startOfDay();
+
+  return CalendarDatePicker2WithActionButtonsConfig(
+    firstDate: firstDate,
+    lastDate: lastDate,
+    dayTextStyle: dayTextStyle,
+    calendarType: calendarType,
+    selectedDayHighlightColor: primaryColor,
+    closeDialogOnCancelTapped: true,
+    firstDayOfWeek: 1,
+    selectableDayPredicate: (day) =>
+        (firstDay == null || !day.isBefore(firstDay)) &&
+        (lastDay == null || !day.isAfter(lastDay)),
+    currentDate: currentDate,
+    weekdayLabelTextStyle: TextStyle(
+      color: primaryColor,
+      fontWeight: FontWeight.w500,
+    ),
+    controlsTextStyle: TextStyle(
+      color: primaryColor,
+      fontSize: 15,
+      fontWeight: FontWeight.w500,
+    ),
+    centerAlignModePicker: true,
+    customModePickerIcon: const SizedBox(),
+    selectedDayTextStyle: dayTextStyle.copyWith(color: Colors.white),
+    nextMonthIcon: Icon(
+      Icons.arrow_right,
+      size: 20,
+      color: primaryColor,
+    ),
+    lastMonthIcon: Icon(
+      Icons.arrow_left,
+      size: 20,
+      color: primaryColor,
+    ),
+    todayTextStyle: dayTextStyle.merge(TextStyle(color: primaryColor)),
+  );
+}
+
+extension on DateTime {
+  DateTime startOfDay() {
+    return DateTime(year, month, day);
+  }
+}
diff --git a/packages/reactive_date_range_picker/example/pubspec.yaml b/packages/reactive_date_range_picker/example/pubspec.yaml
@@ -23,6 +23,7 @@ environment:
 dependencies:
   flutter:
     sdk: flutter
+  calendar_date_picker2: ^1.1.9
   reactive_forms: ">=16.0.0 <18.0.0"
   reactive_date_range_picker:
     path: ../
diff --git a/packages/reactive_date_range_picker/lib/datetime_range_value_accessor.dart b/packages/reactive_date_range_picker/lib/datetime_range_value_accessor.dart
@@ -9,9 +9,10 @@ class DateTimeRangeValueAccessor
   final DateFormat dateTimeFormat;
   final String delimiter;
 
-  DateTimeRangeValueAccessor(
-      {DateFormat? dateTimeFormat, this.delimiter = ' - '})
-      : dateTimeFormat = dateTimeFormat ?? DateFormat('yyyy/MM/dd');
+  DateTimeRangeValueAccessor({
+    DateFormat? dateTimeFormat,
+    this.delimiter = ' - ',
+  }) : dateTimeFormat = dateTimeFormat ?? DateFormat('yyyy/MM/dd');
 
   @override
   String? modelToViewValue(DateTimeRange? modelValue) {
@@ -22,7 +23,9 @@ class DateTimeRangeValueAccessor
 
   @override
   DateTimeRange? viewToModelValue(String? viewValue) {
-    final dateRange = viewValue?.trim().split(delimiter);
+    final dateRange = viewValue == null || viewValue.isEmpty
+        ? null
+        : viewValue.trim().split(delimiter);
 
     return dateRange == null || dateRange.isEmpty
         ? null
diff --git a/packages/reactive_date_range_picker/lib/reactive_date_range_picker.dart b/packages/reactive_date_range_picker/lib/reactive_date_range_picker.dart
@@ -89,6 +89,11 @@ class ReactiveDateRangePicker extends ReactiveFormField<DateTimeRange, String> {
     TextAlignVertical? textAlignVertical,
     bool expands = false,
     MouseCursor cursor = SystemMouseCursors.click,
+    Future<DateTimeRange?> Function(
+      BuildContext context,
+      DateTimeRange? value,
+    )? onTap,
+    Widget Function(BuildContext context, String? value)? valueBuilder,
   }) : super(
           valueAccessor: valueAccessor ?? DateTimeRangeValueAccessor(),
           builder: (field) {
@@ -126,49 +131,67 @@ class ReactiveDateRangePicker extends ReactiveFormField<DateTimeRange, String> {
                   cursor: cursor,
                   child: GestureDetector(
                     onTap: () async {
-                      final dateRange = await showDateRangePicker(
-                        context: field.context,
-                        initialDateRange: field.control.value,
-                        firstDate: firstDate ?? DateTime(1900),
-                        lastDate: effectiveLastDate,
-                        currentDate: currentDate,
-                        initialEntryMode: initialEntryMode,
-                        helpText: helpText,
-                        cancelText: cancelText,
-                        confirmText: confirmText,
-                        saveText: saveText,
-                        errorFormatText: errorFormatText,
-                        errorInvalidText: errorInvalidText,
-                        errorInvalidRangeText: errorInvalidRangeText,
-                        fieldStartHintText: fieldStartHintText,
-                        fieldEndHintText: fieldEndHintText,
-                        fieldStartLabelText: fieldStartLabelText,
-                        fieldEndLabelText: fieldEndLabelText,
-                        locale: locale,
-                        useRootNavigator: useRootNavigator,
-                        routeSettings: routeSettings,
-                        textDirection: textDirection,
-                        builder: builder,
-                        barrierDismissible: barrierDismissible,
-                        barrierColor: barrierColor,
-                        anchorPoint: anchorPoint,
-                        keyboardType: keyboardType,
-                        switchToInputEntryModeIcon: switchToInputEntryModeIcon,
-                        switchToCalendarEntryModeIcon:
-                            switchToCalendarEntryModeIcon,
-                      );
-
-                      if (dateRange == null) {
-                        return;
+                      field.control.focus();
+                      field.control.updateValueAndValidity();
+                      if (onTap != null) {
+                        field.didChange(
+                          effectiveValueAccessor.modelToViewValue(
+                            await onTap(
+                              field.context,
+                              field.control.value,
+                            ),
+                          ),
+                        );
+                      } else {
+                        final dateRange = await showDateRangePicker(
+                          context: field.context,
+                          initialDateRange: field.control.value,
+                          firstDate: firstDate ?? DateTime(1900),
+                          lastDate: effectiveLastDate,
+                          currentDate: currentDate,
+                          initialEntryMode: initialEntryMode,
+                          helpText: helpText,
+                          cancelText: cancelText,
+                          confirmText: confirmText,
+                          saveText: saveText,
+                          errorFormatText: errorFormatText,
+                          errorInvalidText: errorInvalidText,
+                          errorInvalidRangeText: errorInvalidRangeText,
+                          fieldStartHintText: fieldStartHintText,
+                          fieldEndHintText: fieldEndHintText,
+                          fieldStartLabelText: fieldStartLabelText,
+                          fieldEndLabelText: fieldEndLabelText,
+                          locale: locale,
+                          useRootNavigator: useRootNavigator,
+                          routeSettings: routeSettings,
+                          textDirection: textDirection,
+                          builder: builder,
+                          barrierDismissible: barrierDismissible,
+                          barrierColor: barrierColor,
+                          anchorPoint: anchorPoint,
+                          keyboardType: keyboardType,
+                          switchToInputEntryModeIcon:
+                              switchToInputEntryModeIcon,
+                          switchToCalendarEntryModeIcon:
+                              switchToCalendarEntryModeIcon,
+                        );
+
+                        if (dateRange == null) {
+                          return;
+                        }
+                        field.didChange(
+                          effectiveValueAccessor.modelToViewValue(dateRange),
+                        );
                       }
 
+                      field.control.unfocus();
+                      field.control.updateValueAndValidity();
                       field.control.markAsTouched();
-                      field.didChange(
-                          effectiveValueAccessor.modelToViewValue(dateRange));
                     },
                     child: InputDecorator(
                       isFocused: field.control.hasFocus,
                       isEmpty: isEmptyValue,
+                      isHovering: isHovered,
                       baseStyle: baseStyle,
                       textAlign: textAlign,
                       textAlignVertical: textAlignVertical,
@@ -195,9 +218,7 @@ class ReactiveDateRangePicker extends ReactiveFormField<DateTimeRange, String> {
                               )
                             : null,
                       ),
-                      isHovering: isHovered,
-                      child: Text(
-                        field.value ?? '',
+                      child: DefaultTextStyle.merge(
                         style: Theme.of(field.context)
                             .textTheme
                             .titleMedium
@@ -207,6 +228,10 @@ class ReactiveDateRangePicker extends ReactiveFormField<DateTimeRange, String> {
                                   ? Theme.of(field.context).disabledColor
                                   : null,
                             ),
+                        child: valueBuilder?.call(field.context, field.value) ??
+                            Text(
+                              field.value ?? '',
+                            ),
                       ),
                     ),
                   ),
diff --git a/packages/reactive_date_range_picker/pubspec.yaml b/packages/reactive_date_range_picker/pubspec.yaml
@@ -1,6 +1,6 @@
 name: reactive_date_range_picker
 description: Wrapper around flutter showDateRangePicker to use with reactive_forms
-version: 2.2.0
+version: 2.3.0
 repository: https://github.com/artflutter/reactive_forms_widgets/tree/master/packages/reactive_date_range_picker
 issue_tracker: https://github.com/artflutter/reactive_forms_widgets/issues
 
