Ionic 2/3 - ion-datetime - maxを設定すると、デフォルトの年がmaxに変更されます。

Question

イオン2/3アプリion-datetimeとdatepickerコンポーネントを使用します。 それはほとんどうまく動作します。

私は2つの日付を持っています - 開始と終了は、私のコントローラのプロパティにバインドされています。私のコントローラでは、両方の日付の最小値と最大値も設定しました。

問題があります - 任意の日付のmax属性を設定すると、datepickerのデフォルトの日付がその年に設定されます（たとえば、maxを2020に設定すると、datepickerのデフォルトの日付は2020年1月1日になります）。 今日のデフォルトの日付を強制的に表示するにはどうすればいいですか？）。それはデフォルトとして常に最大年の1月1日を使用します。

スクリーンショットの例：私は最大の日付を2018年8月25日に設定しました。 datepickerを開くと、デフォルトの日付は2018年1月1日になります。 最大日付を変更すると、2020年1月25日になります。 これは予期しない動作です。

マイテンプレート：

<ion-item> 
    <ion-label stacked>Start:</ion-label> 
    <ion-datetime [max]="startMax" [min]="startMin" 
displayFormat="DD/MM/YYYY" [(ngModel)]="start" 
(ionChange)="startDateChanged($event)"></ion-datetime> 
</ion-item> 

<ion-item> 
    <ion-label stacked>End:</ion-label> 
    <ion-datetime [min]="endMin" [max]="endMax" 
displayFormat="DD/MM/YYYY" 
[(ngModel)]="end" 
(ionChange)="endDateChanged($event)"></ion-datetime> 
</ion-item> 

マイコントローラ：

export class NewRequestStep2 { 
    start: any; 
    end: any; 
    startMin: any; 
    startMax: any; 
    endMin: any; 
    endMax: any; 

    constructor(public navCtrl: NavController, public navParams: NavParams) { 
    this.startMin = moment().format(); 
    this.startMax = moment().add(1, 'year').format(); 
    this.endMin = this.startMin; 
    this.endMax = this.startMax; 
    } 



startDateChanged(event) { 
    console.log(event); 
    console.log(this.start); 
    console.log(this.end); 
    if (this.end) { 
     if (moment(this.start) > moment(this.end)) { 
     this.end = null; 
     console.log('Invalid end'); 
     } 
    } 
    } 

    endDateChanged(event) { 
    console.log(event); 
    console.log(this.start); 
    console.log(this.end); 
    if (this.start) { 
     if (moment(this.start) > moment(this.end)) { 
     this.start = null; 
     console.log('Invalid start'); 
     } 

    } 
    } 
} 

Answer 1

それdatepickerが表示されている場合にのみ設定することができます。

ここでは、Plunkerが動作しています。

HTML：

<ion-list> 
    <ion-item> 
     <ion-label color="primary">Select Date</ion-label> 
     <ion-input placeholder="Text Input" [value]="dataInicial | date:'dd/MM/yyyy'" (click)="open()"></ion-input> 
    </ion-item> 

    <ion-item no-lines hidden="true"> 
     <ion-datetime #datePicker displayFormat="DD/MM/YYYY" (ionCancel)="this.dataInicial = null" [(ngModel)]="dataInicial" doneText="Feito" cancelText="Cancelar" [max]="maxDate"> 
     </ion-datetime> 
    </ion-item> 
    </ion-list> 

TS：

import { Component, ViewChild } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'app/home.page.html' 
}) 
export class HomePage { 

    appName = 'Ionic App'; 
    dataInicial: Date; 
    maxDate: string; 

    constructor(public neavController: NavController) {} 
    @ViewChild('datePicker') datePicker; 
    open() { 
     if (!this.dataInicial) { 
      this.dataInicial = new Date().toJSON().split('T')[0]; 
      setTimeout(() => { 
       this.datePicker.open(); 
      }, 50) 
     } else { 
      this.datePicker.open(); 
     } 

    } 
} 

Answer 2

コンポーネントが初期化されるとき、現在の日付にstartとend変数を設定してみてください：

export class NewRequestStep2 { 
    start: string = moment().format("YYYY-MM-DD"); 
    end: string = moment().format("YYYY-MM-DD"); 
    startMin: any; 
    startMax: any; 
    endMin: any; 
    endMax: any; 

    constructor(public navCtrl: NavController, public navParams: NavParams) { 
    this.startMin = moment().format(); 
    this.startMax = moment().add(1, 'year').format(); 
    this.endMin = this.startMin; 
    this.endMax = this.startMax; 
    } 



startDateChanged(event) { 
    console.log(event); 
    console.log(this.start); 
    console.log(this.end); 
    if (this.end) { 
     if (moment(this.start) > moment(this.end)) { 
     this.end = null; 
     console.log('Invalid end'); 
     } 
    } 
    } 

    endDateChanged(event) { 
    console.log(event); 
    console.log(this.start); 
    console.log(this.end); 
    if (this.start) { 
     if (moment(this.start) > moment(this.end)) { 
     this.start = null; 
     console.log('Invalid start'); 
     } 

    } 
    } 
} 

Answer 3

私はあなたのような問題を抱えていました。私の場合、私は2つの日付セレクタを持っており、最初の2番目の開始日を選択した日付から選択する必要があります。私は最初の日付セレクタのデータ変更にset timeoutを追加してこの問題を解決しました。

onFromDateChange() { 
    setTimeout(t => { 
    this.dateTimeToMin = this.regForm.controls['startDate']._value; 
    }, 100); 
}