feat: component date picker

2024-02-19 22:49:43 +07:00
parent a35110af71
commit bd065242e6
3 changed files with 160 additions and 6 deletions
--- a/lib/application/component/date_picker/date_picker_view.dart
+++ b/lib/application/component/date_picker/date_picker_view.dart
@@ -0,0 +1,144 @@
+import 'package:calendar_date_picker2/calendar_date_picker2.dart';
+import 'package:cims_apps/application/component/button/button_view.dart';
+import 'package:cims_apps/application/component/text_form/text_form_view.dart';
+import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:flutter/material.dart';
+import 'package:intl/intl.dart';
+
+class DatePickerView extends StatelessWidget {
+  final String name;
+  final TextEditingController ctrl;
+  final DateTime? minDate, maxDate;
+  final String? hintText, buttonName;
+  final bool isMultipleSelection, enabled;
+  final List<DateTime>? initialValue;
+  final ValueChanged<OnChangedDatePickerModel>? onChanged;
+  final ValueChanged<List<DateTime?>>? onFinish;
+  final FormFieldValidator<String>? validatorDate;
+  const DatePickerView(
+      {Key? key,
+      required this.name,
+      required this.ctrl,
+      this.minDate,
+      this.maxDate,
+      this.hintText,
+      this.buttonName,
+      required this.isMultipleSelection,
+      required this.enabled,
+      this.initialValue,
+      this.onChanged,
+      this.onFinish,
+      this.validatorDate})
+      : super(key: key);
+
+  String _dateFormat(DateTime? dateTime) =>
+      dateTime != null ? DateFormat('dd/MM/yyyy').format(dateTime) : "";
+
+  @override
+  Widget build(BuildContext context) {
+    List<DateTime?> initData = initialValue ?? [];
+    List<DateTime?> dateList = [];
+
+    String dateLabel() {
+      return dateList.map((e) => _dateFormat(e)).join(" - ");
+    }
+
+    onChangedDatePicker(List<DateTime?> value) {
+      if (isMultipleSelection) {
+        final pickerDateRange = PickerDateRange(
+          startDate: value[0] ?? DateTime.now(),
+          endDate:
+              value.length > 1 ? value[1] ?? DateTime.now() : DateTime.now(),
+        );
+        onChanged
+            ?.call(OnChangedDatePickerModel(pickerDateRange: pickerDateRange));
+      } else {
+        onChanged?.call(OnChangedDatePickerModel(dateTime: value[0]));
+      }
+      dateList = value;
+    }
+
+    dialogDatePicker() {
+      showModalBottomSheet(
+        context: context,
+        isScrollControlled: true,
+        builder: (BuildContext context) {
+          return Container(
+            padding: const EdgeInsets.only(top: 16.0),
+            height: SizeConfig.height * .65,
+            child: Column(
+              // mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                CalendarDatePicker2(
+                  value: [...initData],
+                  config: CalendarDatePicker2Config(
+                    centerAlignModePicker: true,
+                    calendarType: isMultipleSelection
+                        ? CalendarDatePicker2Type.range
+                        : CalendarDatePicker2Type.single,
+                    customModePickerIcon: const SizedBox(),
+                    firstDate: minDate ?? DateTime(1900),
+                    lastDate: maxDate,
+                  ),
+                  // initialValue: [...initData],
+                  onValueChanged: (value) {
+                    onChangedDatePicker(value);
+                  },
+                ),
+                Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 16),
+                  child: ButtonView(
+                    width: SizeConfig.width,
+                    onPressed: () {
+                      if (dateList.isNotEmpty) {
+                        onFinish?.call(dateList);
+                        ctrl.text = dateLabel();
+                        initData = dateList;
+                      }
+                      Navigator.pop(context);
+                    },
+                    name: 'OK',
+                  ),
+                ),
+              ],
+            ),
+          );
+        },
+      );
+    }
+
+    return TextFormView(
+      name: name,
+      hintText: hintText,
+      readOnly: true,
+      ctrl: ctrl,
+      validator: validatorDate,
+      enabled: enabled,
+      onTap: () {
+        if (enabled) dialogDatePicker();
+      },
+      suffixIcon: const UnconstrainedBox(
+        child: Icon(
+          Icons.calendar_today_rounded,
+          color: ColorPalette.slate400,
+        ),
+      ),
+    );
+  }
+}
+
+class OnChangedDatePickerModel {
+  final DateTime? dateTime;
+  final PickerDateRange? pickerDateRange;
+
+  OnChangedDatePickerModel({this.dateTime, this.pickerDateRange});
+}
+
+class PickerDateRange {
+  final DateTime startDate;
+  final DateTime endDate;
+
+  PickerDateRange({required this.startDate, required this.endDate});
+}