在提示警报 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 在this issue 的回答中所说，警报的最终目标不是为了做这些事情。

但是由于导航堆栈在页面顶部堆叠了一个模式，您可以创建一个 Modal (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();
}

.....

来自Custom Modal Alert with HTML Form的CSS和图片

编辑

如果你想将数据从第二页（模态）传递到第一页（父），可以使用 ionic 的Events（我最喜欢的组件之一）

父页面：（在ngOnInit 或constructor f.e.内）

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 { Events } from 'ionic/angular';）

Answer 2

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

似乎在浏览器中工作。 您可以尝试使用 cssClass 属性对其进行调整。 不过我会选择popover。