fix(ios): preferredDatePickerStyle property (NativeScript#8899)

asharghi · web-flow · commit dbefc43b9bb9 · 2020-09-25T22:59:47.000-07:00
diff --git 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<DatePickerBase, Date>({
 	valueConverter: (v) => new Date(v),
 });
 dateProperty.register(DatePickerBase);
+
+export const iosPreferredDatePickerStyleProperty = new Property<DatePickerBase, number>({
+	name: 'iosPreferredDatePickerStyle',
+	defaultValue: 0,
+	valueConverter: (v) => parseInt(v),
+});
+iosPreferredDatePickerStyleProperty.register(DatePickerBase);
diff --git 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<DatePicker, number>;
 export const dateProperty: Property<DatePicker, Date>;
 export const maxDate: Property<DatePicker, Date>;
 export const minDate: Property<DatePicker, Date>;
+export const iosPreferredDatePickerStyleProperty: Property<DatePicker, number>;
 
 /**
  * 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
@@ -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
@@ -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<TimePicker, number>;
@@ -66,3 +76,5 @@ export const minMinuteProperty: Property<TimePicker, number>;
 
 export const timeProperty: Property<TimePicker, Date>;
 export const minuteIntervalProperty: Property<TimePicker, number>;
+
+export const iosPreferredDatePickerStyleProperty: Property<TimePicker, number>;
diff --git 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
@@ -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<TimePickerBase, Date>({
 	},
 });
 timeProperty.register(TimePickerBase);
+
+export const iosPreferredDatePickerStyleProperty = new Property<TimePickerBase, number>({
+	name: 'iosPreferredDatePickerStyle',
+	defaultValue: 0,
+	valueConverter: (v) => parseInt(v),
+});
+iosPreferredDatePickerStyleProperty.register(TimePickerBase);
