Angular Ionic 离子日期时间选择器
Angular Ionic ion-datetime picker
我在使用从上午 10:00 到 10:00 下午的最小和最大小时编码时间选择器时遇到问题。不幸的是,这无法使用 ion-datetime 实现。还有什么我可以做的吗?这是我的 Stackblitz 演示代码
HTML
<ion-item>
<ion-label>Date</ion-label>
<ion-datetime displayFormat="hh:mm A"
[(ngModel)]="myDate"
(ionChange)="setDate()" min="10:00" max="20:00"></ion-datetime>
</ion-item>
组件
myDate; minDate;maxDate;
datesArray = [];
constructor() {
this.minDate = '2020-08-28 10:00';
this.maxDate = '2020-08-28 20:00'
}
setDate() {
this.minDate = this.myDate;
this.datesArray.push(this.myDate);
}
<ion-content padding>
<ion-item>
<ion-label>Date</ion-label>
<ion-datetime display-timezone="ist" displayFormat="MM/DD/YYYY hh:mm A"
[(ngModel)]="minDate"
(ionChange)="setDate()" hourValues="10,11,12,13,14,15,16,17,18,19,20"></ion-datetime>
</ion-item>
</ion-content>
import { Component, OnInit } from '@angular/core';
import { NavController } from 'ionic-angular';
import { max } from 'rxjs/operator/max';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage implements OnInit {
myDate: any;
minDate: any;
maxDate: any;
datesArray = [];
constructor(private navController: NavController) {
}
ngOnInit() {
this.myDate = new Date();
const minDate = new Date();
minDate.setHours(10, 0, 0, 0);
this.minDate = minDate.toISOString();
const maxDate = new Date();
maxDate.setHours(22, 0, 0, 0);
this.maxDate = maxDate.toISOString();
}
setDate() {
this.minDate = this.myDate;
this.datesArray.push(this.myDate);
}
}
我在使用从上午 10:00 到 10:00 下午的最小和最大小时编码时间选择器时遇到问题。不幸的是,这无法使用 ion-datetime 实现。还有什么我可以做的吗?这是我的 Stackblitz 演示代码
HTML
<ion-item>
<ion-label>Date</ion-label>
<ion-datetime displayFormat="hh:mm A"
[(ngModel)]="myDate"
(ionChange)="setDate()" min="10:00" max="20:00"></ion-datetime>
</ion-item>
组件
myDate; minDate;maxDate;
datesArray = [];
constructor() {
this.minDate = '2020-08-28 10:00';
this.maxDate = '2020-08-28 20:00'
}
setDate() {
this.minDate = this.myDate;
this.datesArray.push(this.myDate);
}
<ion-content padding>
<ion-item>
<ion-label>Date</ion-label>
<ion-datetime display-timezone="ist" displayFormat="MM/DD/YYYY hh:mm A"
[(ngModel)]="minDate"
(ionChange)="setDate()" hourValues="10,11,12,13,14,15,16,17,18,19,20"></ion-datetime>
</ion-item>
</ion-content>
import { Component, OnInit } from '@angular/core';
import { NavController } from 'ionic-angular';
import { max } from 'rxjs/operator/max';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage implements OnInit {
myDate: any;
minDate: any;
maxDate: any;
datesArray = [];
constructor(private navController: NavController) {
}
ngOnInit() {
this.myDate = new Date();
const minDate = new Date();
minDate.setHours(10, 0, 0, 0);
this.minDate = minDate.toISOString();
const maxDate = new Date();
maxDate.setHours(22, 0, 0, 0);
this.maxDate = maxDate.toISOString();
}
setDate() {
this.minDate = this.myDate;
this.datesArray.push(this.myDate);
}
}