在提示警報 ionic-2 中選擇時間

Question

我是 ionic-2 的新手。 我正在開發一個應用程序，用戶必須在其中創建警報。 為此，我創建了一個頁面。 該頁面包含一個“+”按鈕。 單擊該按鈕時，會出現提示警報。 截至目前，該提示警報有一個文本框和確定按鈕。 但是，我需要顯示一個日期時間選擇器，而不是這樣。 我怎樣才能做到這一點？ 有什么幫助嗎？

my html file:
<ion-header>
    <ion-navbar color="primary">
        <ion-title>Alarm</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-fab right bottom>
        <button ion-fab (click)="alarm()" color="vibrant" mini>
            <ion-icon name="add"></ion-icon>
        </button>
    </ion-fab>
</ion-content>

my ts file:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { AlertController } from 'ionic-angular';

@Component({
  selector: 'page-wifi-controller-schedules',
  templateUrl: 'wifi-controller-schedules.html'
})
export class AlarmsPage {

  constructor(public navCtrl: NavController, public alertCtrl: AlertController) {}



  alarm() {
    let prompt = this.alertCtrl.create({
      title: 'Login',
      message: "Enter a name for this new album you're so keen on adding",
      inputs: [
        {
          name: 'title',
          placeholder: 'Title'
        },
      ],
      buttons: [
        {
          text: 'Cancel',
          handler: data => {
            console.log('Cancel clicked');
          }
        },
        {
          text: 'Save',
          handler: data => {
            console.log('Saved clicked');
          }
        }
      ]
    });
    prompt.present();
  }
}

Answer 1

對於日期選擇器，您可能只需將type = 'date'添加到您的input對象（在inputs內）

inputs: [
        {
          name: 'title',
          placeholder: 'Title',
          type: 'date'
        },
      ],

但這不是HH24:mm格式，所以它將是一個日期選擇器......

就像Mike Harrington在關於這個問題的回答中所說的那樣，警報的最終目標不是做這些事情。

但是由於導航堆棧在頁面頂部堆疊了一個模態，您可以創建一個模態（ docs ），給它一些填充，設置rgba(0,0,0,0.85)的背景並關閉模態當用戶按下按鈕/關閉頁面時，您的數據（或調用服務，不確定您的用例）。

因此，如果您創建一個名為Page1且選擇器為page1的子頁面（使用時間選擇器），您只需添加以下 css：

page1.modal {
    padding: 30px;
    background: rgba(0,0,0,0.5);
}

然后創建頁面的模式，如

import { ModalController } from 'ionic/angular';
import { Page1 } from './page1.component';
.......

constructor(public modalCtrl: ModalController) { ... }

showModal() {
   let timepickModal = this.modalCtrl.create(Page1);
   timepickModal.present();
}

.....

來自帶有 HTML 表單的自定義模態警報的CSS 和圖像

編輯

如果要將數據從第二頁（模態）傳遞到第一頁（父頁），可以使用 ionic 的Events （我最喜歡的組件之一）

父頁面：（在ngOnInit或constructor fe 內）

events.subscribe('time:created', time) => {
  // time is passed from modal to here, add it to list.
  myTimeList.push(time);
});

模態頁面：（選擇時間/提交值后）

events.publish('time:created', someObjectHoldingTime);

(import : import { Events } from 'ionic/angular'; )

Answer 2

inputs: [
        {
          type: 'date',
          name: 'title',
          placeholder: 'Title'
        },
      ]

似乎在瀏覽器中工作。 您可以嘗試使用cssClass屬性對其進行調整。 不過我會和popover一起去。