diff --git a/packages/core/ui/date-picker/date-picker-common.ts b/packages/core/ui/date-picker/date-picker-common.ts index 936ee77cb..de41507b1 100644 --- a/packages/core/ui/date-picker/date-picker-common.ts +++ b/packages/core/ui/date-picker/date-picker-common.ts @@ -13,6 +13,7 @@ export class DatePickerBase extends View implements DatePickerDefinition { public maxDate: Date; public minDate: Date; public date: Date; + public iosPreferredDatePickerStyle: number; } DatePickerBase.prototype.recycleNativeView = 'auto'; @@ -60,3 +61,10 @@ export const dateProperty = new Property({ valueConverter: (v) => new Date(v), }); dateProperty.register(DatePickerBase); + +export const iosPreferredDatePickerStyleProperty = new Property({ + name: 'iosPreferredDatePickerStyle', + defaultValue: 0, + valueConverter: (v) => parseInt(v), +}); +iosPreferredDatePickerStyleProperty.register(DatePickerBase); \ No newline at end of file diff --git a/packages/core/ui/date-picker/index.d.ts b/packages/core/ui/date-picker/index.d.ts index b735de5d8..e255230e4 100644 --- a/packages/core/ui/date-picker/index.d.ts +++ b/packages/core/ui/date-picker/index.d.ts @@ -7,6 +7,7 @@ export const dayProperty: Property; export const dateProperty: Property; export const maxDate: Property; export const minDate: Property; +export const iosPreferredDatePickerStyleProperty: Property; /** * Represents an date picker. @@ -51,4 +52,14 @@ export class DatePicker extends View { * Gets or sets the min date. */ minDate: Date; + + /** + * Gets or set the UIDatePickerStyle of the date picker in iOS 13.4+. Defaults to 0. + * Valid values are numbers: + * - 0: automatic (system picks the concrete style based on the current platform and date picker mode) + * - 1: wheels (the date picker displays as a wheel picker) + * - 2: compact (the date picker displays as a label that when tapped displays a calendar-style editor) + * - 3: inline (the date pickers displays as an inline, editable field) + */ + iosPreferredDatePickerStyle: number; } diff --git a/packages/core/ui/date-picker/index.ios.ts b/packages/core/ui/date-picker/index.ios.ts index f7e1618bb..118124bd0 100644 --- a/packages/core/ui/date-picker/index.ios.ts +++ b/packages/core/ui/date-picker/index.ios.ts @@ -5,9 +5,8 @@ import { Device } from '../../platform'; export * from './date-picker-common'; -const SUPPORT_DATE_PICKER_STYLE = parseFloat(Device.os) >= 14.0; -const SUPPORT_TEXT_COLOR = parseFloat(Device.os) < 14.0; -const DEFAULT_DATE_PICKER_STYLE = 1; +const SUPPORT_DATE_PICKER_STYLE = parseFloat(Device.osVersion) >= 13.4; +const SUPPORT_TEXT_COLOR = parseFloat(Device.osVersion) < 14.0; export class DatePicker extends DatePickerBase { private _changeHandler: NSObject; @@ -17,7 +16,7 @@ export class DatePicker extends DatePickerBase { const picker = UIDatePicker.new(); picker.datePickerMode = UIDatePickerMode.Date; if (SUPPORT_DATE_PICKER_STYLE) { - picker.preferredDatePickerStyle = DEFAULT_DATE_PICKER_STYLE; + picker.preferredDatePickerStyle = this.iosPreferredDatePickerStyle; } return picker; } diff --git a/packages/core/ui/time-picker/index.d.ts b/packages/core/ui/time-picker/index.d.ts index ccab54fb2..4801589d6 100644 --- a/packages/core/ui/time-picker/index.d.ts +++ b/packages/core/ui/time-picker/index.d.ts @@ -54,6 +54,16 @@ export class TimePicker extends View { * Gets or sets the minute interval. */ minuteInterval: number; + + /** + * Gets or set the UIDatePickerStyle of the date picker in iOS 13.4+. Defaults to 0. + * Valid values are numbers: + * - 0: automatic (system picks the concrete style based on the current platform and date picker mode) + * - 1: wheels (the date picker displays as a wheel picker) + * - 2: compact (the date picker displays as a label that when tapped displays a calendar-style editor) + * - 3: inline (the date pickers displays as an inline, editable field) + */ + iosPreferredDatePickerStyle: number; } export const hourProperty: Property; @@ -66,3 +76,5 @@ export const minMinuteProperty: Property; export const timeProperty: Property; export const minuteIntervalProperty: Property; + +export const iosPreferredDatePickerStyleProperty: Property; \ No newline at end of file diff --git a/packages/core/ui/time-picker/index.ios.ts b/packages/core/ui/time-picker/index.ios.ts index f0624e512..12c7ddd7f 100644 --- a/packages/core/ui/time-picker/index.ios.ts +++ b/packages/core/ui/time-picker/index.ios.ts @@ -5,9 +5,8 @@ import { Device } from '../../platform'; export * from './time-picker-common'; -const SUPPORT_DATE_PICKER_STYLE = parseFloat(Device.os) >= 14.0; -const SUPPORT_TEXT_COLOR = parseFloat(Device.os) < 14.0; -const DEFAULT_DATE_PICKER_STYLE = 1; +const SUPPORT_DATE_PICKER_STYLE = parseFloat(Device.osVersion) >= 13.4; +const SUPPORT_TEXT_COLOR = parseFloat(Device.osVersion) < 14.0; function getDate(hour: number, minute: number): Date { let components = NSDateComponents.alloc().init(); @@ -36,7 +35,7 @@ export class TimePicker extends TimePickerBase { const picker = UIDatePicker.new(); picker.datePickerMode = UIDatePickerMode.Time; if (SUPPORT_DATE_PICKER_STYLE) { - picker.preferredDatePickerStyle = DEFAULT_DATE_PICKER_STYLE; + picker.preferredDatePickerStyle = this.iosPreferredDatePickerStyle; } return picker; } diff --git a/packages/core/ui/time-picker/time-picker-common.ts b/packages/core/ui/time-picker/time-picker-common.ts index 077973ab3..39c02cbae 100644 --- a/packages/core/ui/time-picker/time-picker-common.ts +++ b/packages/core/ui/time-picker/time-picker-common.ts @@ -98,6 +98,7 @@ export abstract class TimePickerBase extends View implements TimePickerDefinitio public maxHour: number; public minMinute: number; public maxMinute: number; + public iosPreferredDatePickerStyle: number; } TimePickerBase.prototype.recycleNativeView = 'auto'; @@ -204,3 +205,10 @@ export const timeProperty = new Property({ }, }); timeProperty.register(TimePickerBase); + +export const iosPreferredDatePickerStyleProperty = new Property({ + name: 'iosPreferredDatePickerStyle', + defaultValue: 0, + valueConverter: (v) => parseInt(v), +}); +iosPreferredDatePickerStyleProperty.register(TimePickerBase);