在提示警报ionic-2中选择时间 [英] Selecting time in prompt alert ionic-2

问题描述

我是离子-2的新手。我正在开发一个应用程序，用户必须在其中创建警报。为此，我创建了一个页面。该页面包含一个+按钮。单击该按钮时，将显示提示警报。截至目前，该提示警报有一个文本框和确定按钮。但是，我需要显示日期时间选择器。我怎样才能做到这一点？任何帮助？

 我的html文件：
< ion-header> 
< ion-navbar color =primary> 
< ion-title>报警< / ion-title> 
< / ion-navbar> 
< / ion-header> 
 
< ion-content padding> 
< ion-fab right bottom> 
< button ion-fab（click）=alarm（）color =dynamicmini> 
< ion-icon name =add>< / ion-icon> 
< / button> 
< / ion-fab> 
< / ion-content> 
 
我的ts文件：
从'@ angular / core'导入{Component};来自'ionic-angular'的
 import {NavController};来自'ionic-angular'的
 
 import {AlertController}; 
 
 @Component（{
选择器：'page-wifi-controller-schedules'，
 templateUrl：'wifi-controller-schedules.html'
}）
导出类AlarmsPage {
 
构造函数（public navCtrl：NavController，public alertCtrl：AlertController）{} 
 
 
 
 alarm（）{
 let prompt = this.alertCtrl.create（{
 title：'Login'，
 message：输入你喜欢添加的新专辑的名称，
输入：[
 {
名称：'title'，
占位符：'Title'
}，
]，
按钮：[
 {
 text：'Cancel'，
 handler：data => {
 console.log（'Cancel clicked'）; 
} 
}，
 {
 text：'Save'，
 handler：data => {
 console.log（'Saved clicked'）; 
} 
} 
] 
}）; 
 prompt.present（）; 
} 
} 
  

解决方案

for你可以在你的输入对象中添加 type ='date'的日期选择器（在内）输入）

 输入：[
 {
 name：'title' ，
占位符：'标题'，
类型：'日期'
}，
]，
  

但这不是 HH24：mm 格式，因此它将是一个日期选择器......

像（我最喜欢的组件之一） ）

父页面:(在 ngOnInit 或构造函数内fe）

  events.subscribe（'time：created'，time）=> {
 //时间从模态传递到此处，将其添加到列表中。 
 myTimeList.push（time）; 
}）; 
  

模态页面:(选择时间/提交值后）

  events.publish（'time：created'，someObjectHoldingTime）; 
  

（导入：从'ionic / angular'导入{Events}; ）

I'm new to ionic-2. I'm developing an app, where the user will have to create alarms. For that, I've created a page. that page contains a '+' button. When that button is clicked, a prompt alert appears. As of now, that prompt alert has a text-box and ok buttons. But, instead of that I need to display a datetime picker. How can I do that? any help?

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();
  }
}

解决方案

for a datepicker you could probably just add type = 'date' to your input object (within inputs)

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

But this doesn't come in HH24:mm format so it will be a datepicker...

Like Mike Harrington said in an answer on this issue the end goal of the alert is not for doing these kind of things.

But since the navigation stack stacks a modal on top of a page, you can just create a Modal (docs), give it a bit of padding, set a background of rgba(0,0,0,0.85) and close the modal with your data (or call a service, not sure about your usecase) when the user presses a button/closes the page.

So, if you create a child-page (with the time-picker) named Page1 with a selector of page1 you can just add the following css:

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

And then create a modal of the page like

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

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

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

.....

CSS and image from Custom Modal Alert with HTML Form

edit

If you want to pass data from the second page (the modal) to the first page (parent), you can use ionic's Events (one of my favorite components)

Parent page: (within ngOnInit or constructor f.e.)

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

Modal page: (after selecting time/submitting value)

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

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

这篇关于在提示警报ionic-2中选择时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！