Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-28426] Android: Add "datePickerStyle" support to Ti.UI.Picker

GitHub Issuen/a
TypeImprovement
PriorityMedium
StatusClosed
ResolutionFixed
Resolution Date2021-05-26T15:33:06.000+0000
Affected Version/sn/a
Fix Version/sRelease 10.0.1
ComponentsAndroid
Labelsandroid, date, material-design, parity, picker, time
ReporterJoshua Quick
AssigneeJoshua Quick
Created2021-04-24T03:26:07.000+0000
Updated2021-05-26T15:33:06.000+0000

Description

*Summary:* The Ti.UI.Picker view's [datePickerStyle](https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.Picker-property-datePickerStyle) is currently iOS only. We should add support on Android. In particular, we should add the "compact" style which shows the picker as a read-only text field, and when tapped on, show a date/time selection dialog which matches Google's design guidelines. The "datePickerStyle" property needs to be supported by the following types on Android: * [PICKER_TYPE_DATE](https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI-property-PICKER_TYPE_DATE) * [PICKER_TYPE_TIME](https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI-property-PICKER_TYPE_TIME) *Style Constants:* Copy the following constants from Ti.UI.iOS to Ti.UI. Using the old constants should cause a deprecation warning on iOS. * [Ti.UI.iOS.DATE_PICKER_STYLE_AUTOMATIC](https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.iOS-property-DATE_PICKER_STYLE_AUTOMATIC) * [Ti.UI.iOS.DATE_PICKER_STYLE_COMPACT](https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.iOS-property-DATE_PICKER_STYLE_COMPACT) * [Ti.UI.iOS.DATE_PICKER_STYLE_INLINE](https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.iOS-property-DATE_PICKER_STYLE_INLINE) * [Ti.UI.iOS.DATE_PICKER_STYLE_WHEELS](https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.iOS-property-DATE_PICKER_STYLE_WHEELS) *Note:* If the Android only boolean properties [useSpinner](https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.Picker-property-useSpinner) or [nativeSpinner](https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.Picker-property-nativeSpinner) are defined, then they must take priority over the [datePickerStyle](https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.Picker-property-datePickerStyle) property to maintain backward compatibility. When these boolean properties are set true, then they must do the equivalent of DATE_PICKER_STYLE_WHEELS. *Compact/Automatic Date Style:* Android should show a read-only text field with a drop-down arrow. When tapped on, a selection dialog should appear. !PickerDate-Compact-Android.png|thumbnail! !PickerDate-CompactDialog-Android.png|thumbnail! The iOS equivalent is this... !PickerDate-Compact-iOS.png|thumbnail! !PickerDate-CompactDialog-iOS.png|thumbnail! *Compact/Automatic Time Style:* On Android it will appear as follows... !PickerTime-Compact-Android.png|thumbnail! !PickerTime-CompactDialog-Android.png|thumbnail! The iOS equivalent is this... !PickerTime-Compact-iOS.png|thumbnail! !PickerTime-CompactDialog-iOS.png|thumbnail! *Inline Date Style:* The picker appears as a calendar view. !PickerDate-Inline-Android.png|thumbnail! !PickerDate-Inline-iOS.png|thumbnail! *Inline Time Style:* The picker appears as a clock view on Android and a field with spinners on iOS. !PickerTime-Inline-Android.png|thumbnail! !PickerTime-Inline-iOS.png|thumbnail! *Wheels Date Style:* Spinner picker wheels appear for selecting month, day, and year. !PickerDate-Wheels-Android.png|thumbnail! !PickerDate-Wheels-iOS.png|thumbnail! *Wheels Time Style:* Spinner picker wheels appear for selecting hours, minutes, and AM/PM. !PickerTime-Wheels-Android.png|thumbnail! !PickerTime-Wheels-iOS.png|thumbnail!

Attachments

FileDateSize
DatePickerStyleTest.js2021-04-24T03:12:48.000+00001476
PickerDate-Compact-Android.png2021-04-24T03:12:34.000+0000415708
PickerDate-CompactDialog-Android.png2021-04-24T03:12:33.000+0000468192
PickerDate-CompactDialog-iOS.png2021-04-24T03:15:39.000+0000984577
PickerDate-Compact-iOS.png2021-04-24T03:15:43.000+0000793977
PickerDate-Inline-Android.png2021-04-24T03:12:34.000+0000449934
PickerDate-Inline-iOS.png2021-04-24T03:15:38.000+0000850065
PickerDate-Wheels-Android.png2021-04-24T03:12:33.000+0000424032
PickerDate-Wheels-iOS.png2021-04-24T03:15:39.000+0000840019
PickerTime-Compact-Android.png2021-04-24T03:33:25.000+0000414808
PickerTime-CompactDialog-Android.png2021-04-24T03:33:24.000+0000468931
PickerTime-CompactDialog-iOS.png2021-04-24T03:37:30.000+0000912416
PickerTime-Compact-iOS.png2021-04-24T03:37:28.000+0000791083
PickerTime-Inline-Android.png2021-04-24T03:33:23.000+0000447141
PickerTime-Inline-iOS.png2021-04-24T03:37:29.000+0000796295
PickerTime-Wheels-Android.png2021-04-24T03:33:19.000+0000419021
PickerTime-Wheels-iOS.png2021-04-24T03:37:30.000+0000813208
TimePickerStyleTest.js2021-04-24T03:30:08.000+00001497

Comments

  1. Joshua Quick 2021-04-24

    PR (master): https://github.com/appcelerator/titanium_mobile/pull/12745
  2. Christopher Williams 2021-05-26

    merged to master and 10_0_X for 10.0.1 target

JSON Source