From fd3b1af4bc28c93f42ab833ee6284353c7ead9af Mon Sep 17 00:00:00 2001 From: Abraham Obed <65366889+ofceab@users.noreply.github.com> Date: Sun, 2 Jan 2022 22:34:30 +0000 Subject: [PATCH] Added Support of MM-DD-YYYY and DD-MM-YYYY on DateTimePicker --- example/ios/Flutter/Flutter.podspec | 18 -- .../ios/Flutter/flutter_export_environment.sh | 14 +- example/lib/main.dart | 13 +- lib/flutter_datetime_picker.dart | 237 +++++++++++++----- 4 files changed, 178 insertions(+), 104 deletions(-) delete mode 100644 example/ios/Flutter/Flutter.podspec diff --git a/example/ios/Flutter/Flutter.podspec b/example/ios/Flutter/Flutter.podspec deleted file mode 100644 index 5ca30416..00000000 --- a/example/ios/Flutter/Flutter.podspec +++ /dev/null @@ -1,18 +0,0 @@ -# -# NOTE: This podspec is NOT to be published. It is only used as a local source! -# - -Pod::Spec.new do |s| - s.name = 'Flutter' - s.version = '1.0.0' - s.summary = 'High-performance, high-fidelity mobile apps.' - s.description = <<-DESC -Flutter provides an easy and productive way to build and deploy high-performance mobile apps for Android and iOS. - DESC - s.homepage = 'https://flutter.io' - s.license = { :type => 'MIT' } - s.author = { 'Flutter Dev Team' => 'flutter-dev@googlegroups.com' } - s.source = { :git => 'https://github.com/flutter/engine', :tag => s.version.to_s } - s.ios.deployment_target = '8.0' - s.vendored_frameworks = 'Flutter.framework' -end diff --git a/example/ios/Flutter/flutter_export_environment.sh b/example/ios/Flutter/flutter_export_environment.sh index da2211a4..6279c1c0 100755 --- a/example/ios/Flutter/flutter_export_environment.sh +++ b/example/ios/Flutter/flutter_export_environment.sh @@ -1,16 +1,14 @@ #!/bin/sh # This is a generated file; do not edit or check into version control. -export "FLUTTER_ROOT=/Users/liuyanbo/flutter" -export "FLUTTER_APPLICATION_PATH=/Users/liuyanbo/Documents/GitHub/flutter_datetime_picker/example" -export "FLUTTER_TARGET=/Users/liuyanbo/Documents/GitHub/flutter_datetime_picker/example/lib/main.dart" +export "FLUTTER_ROOT=C:\src\flutter-sdk" +export "FLUTTER_APPLICATION_PATH=D:\Programming_projects\Teams\Contributions\flutter_datetime_picker\example" +export "COCOAPODS_PARALLEL_CODE_SIGN=true" +export "FLUTTER_TARGET=lib\main.dart" export "FLUTTER_BUILD_DIR=build" -export "SYMROOT=${SOURCE_ROOT}/../build/ios" -export "OTHER_LDFLAGS=$(inherited) -framework Flutter" -export "FLUTTER_FRAMEWORK_DIR=/Users/liuyanbo/flutter/bin/cache/artifacts/engine/ios" +export "SYMROOT=${SOURCE_ROOT}/../build\ios" export "FLUTTER_BUILD_NAME=1.0.0" export "FLUTTER_BUILD_NUMBER=1" -export "DART_DEFINES=flutter.inspector.structuredErrors%3Dtrue" export "DART_OBFUSCATION=false" -export "TRACK_WIDGET_CREATION=true" +export "TRACK_WIDGET_CREATION=false" export "TREE_SHAKE_ICONS=false" export "PACKAGE_CONFIG=.packages" diff --git a/example/lib/main.dart b/example/lib/main.dart index 1ab0e793..c965a7aa 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -106,18 +106,9 @@ class HomePage extends StatelessWidget { onPressed: () { DatePicker.showDatePicker(context, showTitleActions: true, + datePickerFormat: DatePickerFormat.dd__mm__yyyy, minTime: DateTime(2018, 3, 5), - maxTime: DateTime(2019, 6, 7), - theme: DatePickerTheme( - headerColor: Colors.orange, - backgroundColor: Colors.blue, - itemStyle: TextStyle( - color: Colors.white, - fontWeight: FontWeight.bold, - fontSize: 18), - doneStyle: - TextStyle(color: Colors.white, fontSize: 16)), - onChanged: (date) { + maxTime: DateTime(2019, 6, 7), onChanged: (date) { print('change $date in time zone ' + date.timeZoneOffset.inHours.toString()); }, onConfirm: (date) { diff --git a/lib/flutter_datetime_picker.dart b/lib/flutter_datetime_picker.dart index dba6b566..dec92f7c 100644 --- a/lib/flutter_datetime_picker.dart +++ b/lib/flutter_datetime_picker.dart @@ -12,6 +12,21 @@ export 'package:flutter_datetime_picker/src/datetime_picker_theme.dart'; export 'package:flutter_datetime_picker/src/date_model.dart'; export 'package:flutter_datetime_picker/src/i18n_model.dart'; +/// Format for changing the date picker format +/// May be you want to display the date picker with the format of [DD MM YYYY] +/// then you can use [DatePickerFormat.dd__mm__yyyy] as format to passed +/// +enum DatePickerFormat { + /// Format YYYY-MM-DD + yyyy_mm_dd, + + /// Format MM-DD-YYYY + mm__dd_yyyy, + + /// Format DD-MM-YYYY + dd__mm__yyyy +} + typedef DateChangedCallback(DateTime time); typedef DateCancelledCallback(); typedef String? StringAtIndexCallBack(int index); @@ -28,6 +43,7 @@ class DatePicker { DateChangedCallback? onChanged, DateChangedCallback? onConfirm, DateCancelledCallback? onCancel, + DatePickerFormat? datePickerFormat, locale: LocaleType.en, DateTime? currentTime, DatePickerTheme? theme, @@ -37,6 +53,7 @@ class DatePicker { _DatePickerRoute( showTitleActions: showTitleActions, onChanged: onChanged, + datePickerFormat: datePickerFormat, onConfirm: onConfirm, onCancel: onCancel, locale: locale, @@ -122,12 +139,16 @@ class DatePicker { /// /// Display date&time picker bottom sheet. /// + /// Customize date Time picker Design + /// CHoose a format ie: [DatePickerFormat.dd__mm__yyyy] for dd-mm-yyyy + /// static Future showDateTimePicker( BuildContext context, { bool showTitleActions: true, DateTime? minTime, DateTime? maxTime, DateChangedCallback? onChanged, + DatePickerFormat? datePickerFormat, DateChangedCallback? onConfirm, DateCancelledCallback? onCancel, locale: LocaleType.en, @@ -162,6 +183,7 @@ class DatePicker { BuildContext context, { bool showTitleActions: true, DateChangedCallback? onChanged, + DatePickerFormat? datePickerFormat, DateChangedCallback? onConfirm, DateCancelledCallback? onCancel, locale: LocaleType.en, @@ -171,6 +193,7 @@ class DatePicker { return await Navigator.push( context, _DatePickerRoute( + datePickerFormat: datePickerFormat, showTitleActions: showTitleActions, onChanged: onChanged, onConfirm: onConfirm, @@ -188,6 +211,7 @@ class DatePicker { class _DatePickerRoute extends PopupRoute { _DatePickerRoute({ this.showTitleActions, + this.datePickerFormat, this.onChanged, this.onConfirm, this.onCancel, @@ -204,6 +228,9 @@ class _DatePickerRoute extends PopupRoute { final DateChangedCallback? onChanged; final DateChangedCallback? onConfirm; final DateCancelledCallback? onCancel; + + /// Customize design of date picker + final DatePickerFormat? datePickerFormat; final LocaleType? locale; final DatePickerTheme theme; final BasePickerModel pickerModel; @@ -237,6 +264,7 @@ class _DatePickerRoute extends PopupRoute { context: context, removeTop: true, child: _DatePickerComponent( + datePickerFormat: datePickerFormat ?? DatePickerFormat.yyyy_mm_dd, onChanged: onChanged, locale: this.locale, route: this, @@ -251,6 +279,7 @@ class _DatePickerComponent extends StatefulWidget { _DatePickerComponent({ Key? key, required this.route, + required this.datePickerFormat, required this.pickerModel, this.onChanged, this.locale, @@ -258,6 +287,9 @@ class _DatePickerComponent extends StatefulWidget { final DateChangedCallback? onChanged; + /// Date picker format + final DatePickerFormat datePickerFormat; + final _DatePickerRoute route; final LocaleType? locale; @@ -327,7 +359,8 @@ class _DatePickerState extends State<_DatePickerComponent> { } Widget _renderPickerView(DatePickerTheme theme) { - Widget itemView = _renderItemView(theme); + Widget itemView = + _renderItemView(theme, datePickerFormat: widget.datePickerFormat); if (widget.route.showTitleActions == true) { return Column( children: [ @@ -396,80 +429,150 @@ class _DatePickerState extends State<_DatePickerComponent> { ); } - Widget _renderItemView(DatePickerTheme theme) { + Widget _renderItemView(DatePickerTheme theme, + {required DatePickerFormat datePickerFormat}) { return Container( color: theme.backgroundColor, child: Directionality( textDirection: TextDirection.ltr, - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Container( - child: widget.pickerModel.layoutProportions()[0] > 0 - ? _renderColumnView( - ValueKey(widget.pickerModel.currentLeftIndex()), - theme, - widget.pickerModel.leftStringAtIndex, - leftScrollCtrl, - widget.pickerModel.layoutProportions()[0], (index) { - widget.pickerModel.setLeftIndex(index); - }, (index) { - setState(() { - refreshScrollOffset(); - _notifyDateChanged(); - }); - }) - : null, - ), - Text( - widget.pickerModel.leftDivider(), - style: theme.itemStyle, - ), - Container( - child: widget.pickerModel.layoutProportions()[1] > 0 - ? _renderColumnView( - ValueKey(widget.pickerModel.currentLeftIndex()), - theme, - widget.pickerModel.middleStringAtIndex, - middleScrollCtrl, - widget.pickerModel.layoutProportions()[1], (index) { - widget.pickerModel.setMiddleIndex(index); - }, (index) { - setState(() { - refreshScrollOffset(); - _notifyDateChanged(); - }); - }) - : null, - ), - Text( - widget.pickerModel.rightDivider(), - style: theme.itemStyle, - ), - Container( - child: widget.pickerModel.layoutProportions()[2] > 0 - ? _renderColumnView( - ValueKey(widget.pickerModel.currentMiddleIndex() * 100 + - widget.pickerModel.currentLeftIndex()), - theme, - widget.pickerModel.rightStringAtIndex, - rightScrollCtrl, - widget.pickerModel.layoutProportions()[2], (index) { - widget.pickerModel.setRightIndex(index); - }, (index) { - setState(() { - refreshScrollOffset(); - _notifyDateChanged(); - }); - }) - : null, - ), - ], - ), + child: _buildDatePickerFormat(datePickerFormat, theme), ), ); } + Row _buildDatePickerFormat( + DatePickerFormat datePickerFormat, DatePickerTheme theme) { + switch (datePickerFormat) { + case DatePickerFormat.yyyy_mm_dd: + return _buildDatePickerWithYYYYMMDDFormat(theme); + case DatePickerFormat.mm__dd_yyyy: + return _buildDatePickerWithMMDDYYYYFormat(theme); + case DatePickerFormat.dd__mm__yyyy: + return _buildDatePickerWithDDMMYYYYFormat(theme); + default: + throw Exception('DatePickerFormat not supported'); + } + } + + Row _buildDatePickerWithYYYYMMDDFormat(DatePickerTheme theme) { + return Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + _buildYear(theme), + Text( + widget.pickerModel.leftDivider(), + style: theme.itemStyle, + ), + _buildMonth(theme), + Text( + widget.pickerModel.rightDivider(), + style: theme.itemStyle, + ), + _buildDay(theme), + ], + ); + } + + Row _buildDatePickerWithMMDDYYYYFormat(DatePickerTheme theme) { + return Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + _buildMonth(theme), + Text( + widget.pickerModel.leftDivider(), + style: theme.itemStyle, + ), + _buildDay(theme), + Text( + widget.pickerModel.rightDivider(), + style: theme.itemStyle, + ), + _buildYear(theme), + ], + ); + } + + //// Build date picker with DD-MM-YYYY + Row _buildDatePickerWithDDMMYYYYFormat(DatePickerTheme theme) { + return Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + _buildDay(theme), + Text( + widget.pickerModel.leftDivider(), + style: theme.itemStyle, + ), + _buildMonth(theme), + Text( + widget.pickerModel.rightDivider(), + style: theme.itemStyle, + ), + _buildYear(theme), + ], + ); + } + + Container _buildYear(DatePickerTheme theme) { + return Container( + child: widget.pickerModel.layoutProportions()[0] > 0 + ? _renderColumnView( + ValueKey(widget.pickerModel.currentLeftIndex()), + theme, + widget.pickerModel.leftStringAtIndex, + leftScrollCtrl, + widget.pickerModel.layoutProportions()[0], (index) { + widget.pickerModel.setLeftIndex(index); + }, (index) { + setState(() { + refreshScrollOffset(); + _notifyDateChanged(); + }); + }) + : null, + ); + } + + Container _buildMonth(DatePickerTheme theme) { + return Container( + child: widget.pickerModel.layoutProportions()[1] > 0 + ? _renderColumnView( + ValueKey(widget.pickerModel.currentLeftIndex()), + theme, + widget.pickerModel.middleStringAtIndex, + middleScrollCtrl, + widget.pickerModel.layoutProportions()[1], (index) { + widget.pickerModel.setMiddleIndex(index); + }, (index) { + setState(() { + refreshScrollOffset(); + _notifyDateChanged(); + }); + }) + : null, + ); + } + + Container _buildDay(DatePickerTheme theme) { + return Container( + child: widget.pickerModel.layoutProportions()[2] > 0 + ? _renderColumnView( + ValueKey(widget.pickerModel.currentMiddleIndex() * 100 + + widget.pickerModel.currentLeftIndex()), + theme, + widget.pickerModel.rightStringAtIndex, + rightScrollCtrl, + widget.pickerModel.layoutProportions()[2], (index) { + widget.pickerModel.setRightIndex(index); + }, (index) { + setState(() { + refreshScrollOffset(); + _notifyDateChanged(); + }); + }) + : null, + ); + } + // Title View Widget _renderTitleActionsView(DatePickerTheme theme) { final done = _localeDone();