Change datepicker appearance on iOS

xuhcc · Sep 14, 2019 · f7be886 · f7be886
1 parent 12540cd
commit f7be886
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git a/reference.d.ts b/reference.d.ts
@@ -1,2 +1,3 @@
 /// <reference path="node_modules/tns-platform-declarations/android.d.ts" />
 /// <reference path="node_modules/tns-platform-declarations/ios.d.ts" />
+/// <reference path="node_modules/nativescript-iqkeyboardmanager/index.d.ts" />
diff --git a/src/app/app.module.tns.ts b/src/app/app.module.tns.ts
@@ -14,6 +14,7 @@ import { PlainTextComponent } from './plaintext/plaintext.component';
 import { SettingsComponent } from './settings/settings.component';
 import { TaskFormComponent } from './task-form/task-form.component';
 import { TaskListComponent } from './task-list/task-list.component';
+import { isIOS } from './shared/platform';
 
 @NgModule({
     declarations: [
@@ -42,5 +43,9 @@ export class AppModule {
     constructor() {
         registerElement('Fab', () => Fab);
         registerElement('PullToRefresh', () => PullToRefresh);
+        if (isIOS) {
+            const iqKeyboard = IQKeyboardManager.sharedManager();
+            iqKeyboard.shouldResignOnTouchOutside = true;
+        }
     }
 }
diff --git a/src/app/shared/date-picker.tns.ts b/src/app/shared/date-picker.tns.ts
@@ -5,8 +5,7 @@ import { dateToString } from './misc';
 export function openDatePicker(): Promise<string> {
     const picker = new ModalDatetimepicker();
     return picker.pickDate({
-        title: 'Select date',
-        theme: 'light',
+        theme: 'overlay',
     }).then((result) => {
         const date = new Date(Date.UTC(result.year, result.month - 1, result.day));
         return dateToString(date);