Added a new parameter (timePickerEntryModeInput) to set timepicker mode, dial or input.

Author: hslbetto

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 2.1.0 - 2021-07-08
+
+* Fixed 12h display format.
+* Fixed field cleaning.
+* Added a new parameter (timePickerEntryModeInput) to set timepicker mode, dial or input.
+
 ## 2.0.0 - 2021-03-09
 
 * Migrate to null safety.

README.md

@@ -2,6 +2,8 @@
 
 [![pub package](https://img.shields.io/pub/v/date_time_picker.svg)](https://pub.dartlang.org/packages/date_time_picker)
 
+<a href="https://www.buymeacoffee.com/hslbetto" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-blue.png" alt="Buy Me A Beer" style="width: 150px !important;"></a>
+
 A Flutter widget to show a text form field to display a date or clock dialog.\
 This widget extend TextField and has a similar behavior as TextFormField
 
@@ -12,7 +14,7 @@ In the `pubspec.yaml` of your flutter project, add the following dependency:
 ```yaml
 dependencies:
   ...
-  date_time_picker: "^2.0.0"
+  date_time_picker: "^2.1.0"
 ```
 
 In your library add the following import:

example/lib/main.dart

@@ -16,7 +16,7 @@ class MyApp extends StatelessWidget {
         GlobalMaterialLocalizations.delegate,
         GlobalCupertinoLocalizations.delegate,
       ],
-      supportedLocales: [Locale('pt', 'BR')],
+      supportedLocales: [Locale('en', 'US')], //, Locale('pt', 'BR')],
     );
   }
 }
@@ -35,7 +35,7 @@ class _MyHomePageState extends State<MyHomePage> {
   late TextEditingController _controller3;
   late TextEditingController _controller4;
 
-  //String _initialValue;
+  //String _initialValue = '';
   String _valueChanged1 = '';
   String _valueToValidate1 = '';
   String _valueSaved1 = '';
@@ -136,14 +136,14 @@ class _MyHomePageState extends State<MyHomePage> {
               ),
               DateTimePicker(
                 type: DateTimePickerType.date,
-                dateMask: 'yyyy/MM/dd',
+                //dateMask: 'yyyy/MM/dd',
                 controller: _controller3,
                 //initialValue: _initialValue,
                 firstDate: DateTime(2000),
                 lastDate: DateTime(2100),
                 icon: Icon(Icons.event),
                 dateLabelText: 'Date',
-                //locale: Locale('en', 'US'),
+                locale: Locale('pt', 'BR'),
                 onChanged: (val) => setState(() => _valueChanged3 = val),
                 validator: (val) {
                   setState(() => _valueToValidate3 = val ?? '');
@@ -153,12 +153,13 @@ class _MyHomePageState extends State<MyHomePage> {
               ),
               DateTimePicker(
                 type: DateTimePickerType.time,
-                controller: _controller4,
-                //initialValue: _initialValue,
+                //timePickerEntryModeInput: true,
+                //controller: _controller4,
+                initialValue: '', //_initialValue,
                 icon: Icon(Icons.access_time),
                 timeLabelText: "Time",
-                //use24HourFormat: false,
-                //locale: Locale('en', 'US'),
+                use24HourFormat: false,
+                locale: Locale('pt', 'BR'),
                 onChanged: (val) => setState(() => _valueChanged4 = val),
                 validator: (val) {
                   setState(() => _valueToValidate4 = val ?? '');
@@ -227,6 +228,11 @@ class _MyHomePageState extends State<MyHomePage> {
                     _valueSaved3 = '';
                     _valueSaved4 = '';
                   });
+
+                  _controller1.clear();
+                  _controller2.clear();
+                  _controller3.clear();
+                  _controller4.clear();
                 },
                 child: Text('Reset'),
               ),

example/pubspec.yaml

@@ -28,7 +28,7 @@ dependencies:
 
   intl: ^0.17.0
 
-  date_time_picker: #^2.0.0
+  date_time_picker: #^2.1.0
     path: ../
 
   # The following adds the Cupertino Icons font to your application.

lib/date_time_picker.dart

@@ -164,6 +164,7 @@ class DateTimePicker extends FormField<String> {
     this.routeSettings,
     this.use24HourFormat = true,
     this.timeFieldWidth,
+    this.timePickerEntryModeInput = false,
     String? initialValue,
     FocusNode? focusNode,
     InputDecoration? decoration,
@@ -504,6 +505,8 @@ class DateTimePicker extends FormField<String> {
   /// The width for time text field when DateTimePickerType is dateTimeSeparated.
   final double? timeFieldWidth;
 
+  final bool timePickerEntryModeInput;
+
   final ValueChanged<String>? onChanged;
 
   @override
@@ -531,17 +534,22 @@ class _DateTimePickerState extends FormFieldState<String> {
   void initState() {
     super.initState();
 
-    _dDate = widget.initialDate ?? DateTime.now();
-    _tTime = widget.initialTime ?? TimeOfDay.now();
-
     if (widget.controller == null) {
       _stateController = TextEditingController(text: widget.initialValue);
     } else {
       widget.controller?.addListener(_handleControllerChanged);
     }
 
+    initValues();
+  }
+
+  void initValues() {
+    _dDate = widget.initialDate ?? DateTime.now();
+    _tTime = widget.initialTime ?? TimeOfDay.now();
+
     final lsValue = _effectiveController?.text.trim();
     final languageCode = widget.locale?.languageCode;
+
     if (lsValue != null && lsValue != '' && lsValue != 'null') {
       if (widget.type != DateTimePickerType.time) {
         _dDate = DateTime.tryParse(lsValue) ?? DateTime.now();
@@ -591,8 +599,8 @@ class _DateTimePickerState extends FormFieldState<String> {
   @override
   void didUpdateWidget(DateTimePicker oldWidget) {
     super.didUpdateWidget(oldWidget);
-
     final languageCode = widget.locale?.languageCode;
+
     if (widget.controller != oldWidget.controller) {
       oldWidget.controller?.removeListener(_handleControllerChanged);
       widget.controller?.addListener(_handleControllerChanged);
@@ -660,9 +668,11 @@ class _DateTimePickerState extends FormFieldState<String> {
           _timeLabelController.text = _sTime + _sPeriod;
         }
       }
-    }else{
+    } else {
       _dateLabelController.clear();
       _timeLabelController.clear();
+
+      initValues();
     }
   }
 
@@ -746,20 +756,24 @@ class _DateTimePickerState extends FormFieldState<String> {
     }
   }
 
-  void set12HourTimeValues(final TimeOfDay ltTimePicked) {
-    final now = DateTime.now();
-    final time = DateTime(
-        now.year, now.month, now.day, ltTimePicked.hour, ltTimePicked.minute);
-    final lsHour = DateFormat("hh", widget.locale.toString()).format(time);
-    final lsMinute = DateFormat("mm", widget.locale.toString()).format(time);
+  void set12HourTimeValues(final TimeOfDay ptTimePicked) {
+    final ldNow = DateTime.now();
+    final ldTime = DateTime(ldNow.year, ldNow.month, ldNow.day,
+        ptTimePicked.hour, ptTimePicked.minute);
+    final lsHour = DateFormat("hh", widget.locale.toString()).format(ldTime);
+    final lsMinute = DateFormat("mm", widget.locale.toString()).format(ldTime);
+
     _sTime = '$lsHour:$lsMinute';
-    _sPeriod = ltTimePicked.period.index == 0 ? ' AM' : ' PM';
+    _sPeriod = ptTimePicked.period.index == 0 ? ' AM' : ' PM';
   }
 
   Future<void> _showTimePickerDialog() async {
     final ltTimePicked = await showTimePicker(
       context: context,
       initialTime: _tTime,
+      initialEntryMode: widget.timePickerEntryModeInput
+          ? TimePickerEntryMode.input
+          : TimePickerEntryMode.dial,
       useRootNavigator: widget.useRootNavigator,
       routeSettings: widget.routeSettings,
       builder: (BuildContext context, Widget? child) {
@@ -772,7 +786,7 @@ class _DateTimePickerState extends FormFieldState<String> {
     );
 
     if (ltTimePicked != null) {
-      var lsHour = ltTimePicked.minute.toString().padLeft(2, '0');
+      var lsHour = ltTimePicked.hour.toString().padLeft(2, '0');
       var lsMinute = ltTimePicked.minute.toString().padLeft(2, '0');
 
       if (ltTimePicked.period.index == 0 && lsHour == '12') {
@@ -836,6 +850,9 @@ class _DateTimePickerState extends FormFieldState<String> {
       final ltTimePicked = await showTimePicker(
         context: context,
         initialTime: _tTime,
+        initialEntryMode: widget.timePickerEntryModeInput
+            ? TimePickerEntryMode.input
+            : TimePickerEntryMode.dial,
         useRootNavigator: widget.useRootNavigator,
         routeSettings: widget.routeSettings,
         builder: (BuildContext context, Widget? child) {
@@ -849,7 +866,7 @@ class _DateTimePickerState extends FormFieldState<String> {
 
       if (ltTimePicked != null) {
         var lsHour = ltTimePicked.hour.toString().padLeft(2, '0');
-        final lsMinute = ltTimePicked.minute.toString().padLeft(2, '0');
+        var lsMinute = ltTimePicked.minute.toString().padLeft(2, '0');
 
         if (ltTimePicked.period.index == 0 && lsHour == '12') {
           lsHour = '00';

pubspec.yaml

@@ -1,6 +1,6 @@
 name: date_time_picker
 description: A Flutter widget to display a date time form field to show a date or clock dialog.
-version: 2.0.0
+version: 2.1.0
 homepage: https://github.com/m3uzz/date_time_picker
 
 environment: