fix(ios): time-picker and date-picker for iOS 14 (NativeScript#8877)

asharghi · web-flow · commit 45fb6c481b3a · 2020-09-23T08:00:34.000-07:00
diff --git a/packages/core/ui/date-picker/index.ios.ts b/packages/core/ui/date-picker/index.ios.ts
@@ -1,17 +1,24 @@
 import { DatePickerBase, yearProperty, monthProperty, dayProperty, dateProperty, maxDateProperty, minDateProperty } from './date-picker-common';
 import { colorProperty } from '../styling/style-properties';
 import { Color } from '../../color';
+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;
+
 export class DatePicker extends DatePickerBase {
 	private _changeHandler: NSObject;
 	public nativeViewProtected: UIDatePicker;
 
 	public createNativeView() {
 		const picker = UIDatePicker.new();
 		picker.datePickerMode = UIDatePickerMode.Date;
-
+		if (SUPPORT_DATE_PICKER_STYLE) {
+			picker.preferredDatePickerStyle = DEFAULT_DATE_PICKER_STYLE;
+		}
 		return picker;
 	}
 
@@ -74,11 +81,13 @@ export class DatePicker extends DatePickerBase {
 	}
 
 	[colorProperty.getDefault](): UIColor {
-		return this.nativeViewProtected.valueForKey('textColor');
+		return SUPPORT_TEXT_COLOR ? this.nativeViewProtected.valueForKey('textColor') : UIColor.new();
 	}
 	[colorProperty.setNative](value: Color | UIColor) {
-		const picker = this.nativeViewProtected;
-		picker.setValueForKey(value instanceof Color ? value.ios : value, 'textColor');
+		if (SUPPORT_TEXT_COLOR) {
+			const picker = this.nativeViewProtected;
+			picker.setValueForKey(value instanceof Color ? value.ios : value, 'textColor');
+		}
 	}
 }
 
diff --git a/packages/core/ui/time-picker/index.ios.ts b/packages/core/ui/time-picker/index.ios.ts
@@ -1,9 +1,14 @@
 import { TimePickerBase, timeProperty, minuteIntervalProperty, minuteProperty, minMinuteProperty, maxMinuteProperty, hourProperty, minHourProperty, maxHourProperty } from './time-picker-common';
 import { Color } from '../../color';
 import { colorProperty } from '../styling/style-properties';
+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;
+
 function getDate(hour: number, minute: number): Date {
 	let components = NSDateComponents.alloc().init();
 	components.hour = hour;
@@ -30,7 +35,9 @@ export class TimePicker extends TimePickerBase {
 	createNativeView() {
 		const picker = UIDatePicker.new();
 		picker.datePickerMode = UIDatePickerMode.Time;
-
+		if (SUPPORT_DATE_PICKER_STYLE) {
+			picker.preferredDatePickerStyle = DEFAULT_DATE_PICKER_STYLE;
+		}
 		return picker;
 	}
 
@@ -106,11 +113,13 @@ export class TimePicker extends TimePickerBase {
 	}
 
 	[colorProperty.getDefault](): UIColor {
-		return this.nativeViewProtected.valueForKey('textColor');
+		return SUPPORT_TEXT_COLOR ? this.nativeViewProtected.valueForKey('textColor') : UIColor.new();
 	}
 	[colorProperty.setNative](value: Color | UIColor) {
-		const color = value instanceof Color ? value.ios : value;
-		this.nativeViewProtected.setValueForKey(color, 'textColor');
+		if (SUPPORT_TEXT_COLOR) {
+			const color = value instanceof Color ? value.ios : value;
+			this.nativeViewProtected.setValueForKey(color, 'textColor');
+		}
 	}
 }
 
diff --git a/packages/types-ios/src/lib/ios/objc-x86_64/objc!UIKit.d.ts b/packages/types-ios/src/lib/ios/objc-x86_64/objc!UIKit.d.ts
@@ -6101,6 +6101,8 @@ declare class UIDatePicker extends UIControl implements NSCoding {
 
 	minuteInterval: number;
 
+	preferredDatePickerStyle: number;
+
 	timeZone: NSTimeZone;
 
 	constructor(o: { coder: NSCoder; }); // inherited from NSCoding
