Angular Ionic 离子日期时间选择器

Posted 2023-03-13

【中文标题】Angular Ionic 离子日期时间选择器

【英文标题】：Angular Ionic ion-datetime picker

【发布时间】：2020-12-17 22:34:23

【问题描述】：

我在使用从上午 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);
  

【参考方案1】：

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

这里是工作演示https://stackblitz.com/edit/ionic-3y23qf