fix(datetimepicker): spinner & calendar ipads display issue (#173)

rob4226 · web-flow · commit cf894d55dd57 · 2021-09-27T12:06:00.000-07:00
closes #128
diff --git a/apps/demo-angular/src/plugin-demos/datetimepicker.component.html b/apps/demo-angular/src/plugin-demos/datetimepicker.component.html
@@ -17,6 +17,11 @@
 			<DatePickerField minDate="2020/02/02" maxDate="2021/02/02" hint="tap to select"></DatePickerField>
 			<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
 
+			<!-- iOS 14+ defaults to calendar type so show example of spinner type also. -->
+			<Label text="Spinner type" class="content" *ngIf="isIOS14plus"></Label>
+			<DatePickerField hint="select date" iosPreferredDatePickerStyle="1" *ngIf="isIOS14plus"></DatePickerField>
+			<StackLayout class="hr-light m-10" android:visibility="collapse" *ngIf="isIOS14plus"></StackLayout>
+
 			<Label text="modified picker texts" class="content"></Label>
 			<DatePickerField hint="tap to choose" pickerOkText="Approve" pickerCancelText="Reject" pickerTitle="Confirm predefined date selection" pickerDefaultDate="2019/05/15"></DatePickerField>
 			<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
diff --git a/apps/demo-angular/src/plugin-demos/datetimepicker.component.ts b/apps/demo-angular/src/plugin-demos/datetimepicker.component.ts
@@ -1,5 +1,5 @@
 import { Component, NgZone, ViewChild, ElementRef } from '@angular/core';
-import { EventData, Button } from '@nativescript/core';
+import { Device, EventData, isIOS, Button } from '@nativescript/core';
 import { DateTimePicker } from '@nativescript/datetimepicker';
 
 @Component({
@@ -73,6 +73,7 @@ export class DatetimepickerComponent {
 	public timeVisibility: string;
 	public dateTimeVisibility: string;
 	public customVisibility: string;
+	public isIOS14plus = isIOS && parseFloat(Device.osVersion) >= 14.0;
 	private _expandedId: string;
 
 	@ViewChild('scrollView', { static: false }) scrollView: ElementRef;
diff --git a/apps/demo/src/plugin-demos/datetimepicker.xml b/apps/demo/src/plugin-demos/datetimepicker.xml
@@ -2,7 +2,7 @@
     navigatingTo="navigatingTo"
     xmlns="http://schemas.nativescript.org/tns.xsd"
     xmlns:datetime="@nativescript/datetimepicker">
-    
+
     <ActionBar class="action-bar">
         <Label class="action-bar-title" text="DateTimePicker Demo TS"></Label>
     </ActionBar>
@@ -23,6 +23,11 @@
                 <datetime:DatePickerField minDate="2020/02/02" maxDate="2021/02/02" hint="tap to select"/>
                 <StackLayout class="hr-light m-10" android:visibility="collapse"/>
 
+								<!-- iOS 14+ defaults to calendar type so show example of spinner type also. -->
+								<Label text="Spinner type" class="content" visibility="{{ isIOS14plus ? 'visible' : 'collapsed' }}"/>
+                <datetime:DatePickerField hint="select date" iosPreferredDatePickerStyle="1" visibility="{{ isIOS14plus ? 'visible' : 'collapsed' }}"/>
+                <StackLayout class="hr-light m-10" android:visibility="collapse" visibility="{{ isIOS14plus ? 'visible' : 'collapsed' }}"/>
+
                 <Label text="modified picker texts" class="content"/>
                 <datetime:DatePickerField hint="tap to choose" pickerOkText="Approve" pickerCancelText="Reject"
                     pickerTitle="Confirm predefined date selection" pickerDefaultDate="2019/05/15"/>
diff --git a/packages/datetimepicker/index.ios.ts b/packages/datetimepicker/index.ios.ts
@@ -11,6 +11,7 @@ export class DateTimePicker extends DateTimePickerBase {
 	private static readonly SUPPORT_TEXT_COLOR = parseFloat(Device.osVersion) < 14.0;
 	private static readonly DEFAULT_DATE_PICKER_STYLE = parseFloat(Device.osVersion) >= 14.0 ? 3 : 1;
 	private static readonly DEFAULT_TIME_PICKER_STYLE = 1;
+	private static readonly _isTablet = Device.deviceType === 'Tablet';
 
 	public static PICKER_DEFAULT_MESSAGE_HEIGHT = parseFloat(Device.osVersion) >= 14.0 ? 300 : 192;
 	public static PICKER_WIDTH_INSETS = 16;
@@ -103,14 +104,18 @@ export class DateTimePicker extends DateTimePickerBase {
 		DateTimePicker._applyDialogSpinnersColors(nativePicker, pickerContainer, spinnersTextColor, spinnersBackgroundColor);
 
 		const pickerView = nativePicker;
-		const left = (alertController.view.frame.size.width - pickerViewWidth) / 2 - DateTimePicker.PICKER_WIDTH_INSETS;
+		const left = this._isTablet ? 0 : (alertController.view.frame.size.width - pickerViewWidth) / 2 - DateTimePicker.PICKER_WIDTH_INSETS;
 		pickerView.frame = CGRectMake(left, 0, pickerViewWidth, pickerViewHeight);
 		pickerContainer.addSubview(pickerView);
 		DateTimePicker._clearVibrancyEffects(alertController.view);
 
 		const messageLabel = DateTimePicker._findLabelWithText(alertController.view, DateTimePicker.PICKER_DEFAULT_MESSAGE);
 		const messageLabelContainer = DateTimePicker._getLabelContainer(messageLabel);
-		messageLabelContainer.clipsToBounds = true;
+		if (this._isTablet) {
+			messageLabelContainer.clipsToBounds = false;
+		} else {
+			messageLabelContainer.clipsToBounds = true;
+		}
 		messageLabelContainer.addSubview(pickerContainer);
 
 		pickerContainer.translatesAutoresizingMaskIntoConstraints = false;
diff --git a/tools/demo/datetimepicker/index.ts b/tools/demo/datetimepicker/index.ts
@@ -1,4 +1,4 @@
-import { EventData, ScrollView, Button } from '@nativescript/core';
+import { Device, EventData, isIOS, ScrollView, Button } from '@nativescript/core';
 import { DemoSharedBase } from '../utils';
 import { DateTimePicker } from '@nativescript/datetimepicker';
 
@@ -12,6 +12,7 @@ export class DemoSharedDatetimepicker extends DemoSharedBase {
 	enabled1 = true;
 	enabled2 = true;
 	enabled3 = true;
+	isIOS14plus = isIOS && parseFloat(Device.osVersion) >= 14.0;
 	private scrollView: ScrollView;
 
 	constructor() {
