[TIMOB-28426] Android: Add "datePickerStyle" support to Ti.UI.Picker
GitHub Issue | n/a |
---|---|
Type | Improvement |
Priority | Medium |
Status | Closed |
Resolution | Fixed |
Resolution Date | 2021-05-26T15:33:06.000+0000 |
Affected Version/s | n/a |
Fix Version/s | Release 10.0.1 |
Components | Android |
Labels | android, date, material-design, parity, picker, time |
Reporter | Joshua Quick |
Assignee | Joshua Quick |
Created | 2021-04-24T03:26:07.000+0000 |
Updated | 2021-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
File | Date | Size |
---|---|---|
DatePickerStyleTest.js | 2021-04-24T03:12:48.000+0000 | 1476 |
PickerDate-Compact-Android.png | 2021-04-24T03:12:34.000+0000 | 415708 |
PickerDate-CompactDialog-Android.png | 2021-04-24T03:12:33.000+0000 | 468192 |
PickerDate-CompactDialog-iOS.png | 2021-04-24T03:15:39.000+0000 | 984577 |
PickerDate-Compact-iOS.png | 2021-04-24T03:15:43.000+0000 | 793977 |
PickerDate-Inline-Android.png | 2021-04-24T03:12:34.000+0000 | 449934 |
PickerDate-Inline-iOS.png | 2021-04-24T03:15:38.000+0000 | 850065 |
PickerDate-Wheels-Android.png | 2021-04-24T03:12:33.000+0000 | 424032 |
PickerDate-Wheels-iOS.png | 2021-04-24T03:15:39.000+0000 | 840019 |
PickerTime-Compact-Android.png | 2021-04-24T03:33:25.000+0000 | 414808 |
PickerTime-CompactDialog-Android.png | 2021-04-24T03:33:24.000+0000 | 468931 |
PickerTime-CompactDialog-iOS.png | 2021-04-24T03:37:30.000+0000 | 912416 |
PickerTime-Compact-iOS.png | 2021-04-24T03:37:28.000+0000 | 791083 |
PickerTime-Inline-Android.png | 2021-04-24T03:33:23.000+0000 | 447141 |
PickerTime-Inline-iOS.png | 2021-04-24T03:37:29.000+0000 | 796295 |
PickerTime-Wheels-Android.png | 2021-04-24T03:33:19.000+0000 | 419021 |
PickerTime-Wheels-iOS.png | 2021-04-24T03:37:30.000+0000 | 813208 |
TimePickerStyleTest.js | 2021-04-24T03:30:08.000+0000 | 1497 |
PR (master): https://github.com/appcelerator/titanium_mobile/pull/12745
merged to master and 10_0_X for 10.0.1 target