MOBILE-2890 calendar: Improve new reminder UX

src/addon/calendar/pages/event/event.html

@@ -98,12 +98,11 @@
 
             <ng-container *ngIf="event.timestart + event.timeduration > currentTime">
                 <ion-item>
-                    <ion-label stacked><h2>{{ 'addon.calendar.setnewreminder' | translate }}</h2></ion-label>
-                    <ion-datetime [(ngModel)]="notificationTimeText" [placeholder]="'core.choosedots' | translate" [displayFormat]="notificationFormat" [min]="notificationMin" [max]="notificationMax"></ion-datetime>
-                </ion-item>
-                <ion-item>
-                    <button ion-button block color="primary" (click)="addNotificationTime($event)" [disabled]="!notificationTimeText">{{ 'core.save' | translate }}</button>
+                    <button ion-button block color="primary" (click)="notificationPicker.open()">
+                        {{ 'addon.calendar.setnewreminder' | translate }}
+                    </button>
                 </ion-item>
+                <ion-datetime #notificationPicker hidden [(ngModel)]="notificationTimeText" [displayFormat]="notificationFormat" [min]="notificationMin" [max]="notificationMax" [doneText]="'core.add' | translate"(ionChange)="addNotificationTime()"></ion-datetime>
             </ng-container>
         </ion-card>
     </core-loading>

src/addon/calendar/pages/event/event.ts

@@ -311,13 +311,8 @@ export class AddonCalendarEventPage implements OnDestroy {
 
     /**
      * Add a reminder for this event.
-     *
-     * @param e Click event.
      */
-    addNotificationTime(e: Event): void {
-        e.preventDefault();
-        e.stopPropagation();
-
+    addNotificationTime(): void {
         if (this.notificationTimeText && this.event && this.event.id) {
             let notificationTime = this.timeUtils.convertToTimestamp(this.notificationTimeText);