Ionic 2/3 - ion-datetime - setting max change une année par défaut à son maximum

Question

dans l'application Ionic 2/3 Je souhaite utiliser ion-datetime et son composant datepicker. Il fonctionne presque bien.

J'ai deux dates - début et fin, qui sont liées à mes propriétés de contrôleur. Dans mon contrôleur, j'ai également mis les valeurs min et max pour les deux dates. Problème: lorsque je définis un attribut max pour l'une des dates, la date par défaut dans datepicker est définie sur son année (par exemple, si je définis max à 2020, la date par défaut dans datepicker sera le 1er janvier 2020). Comment puis-je le forcer à afficher la date par défaut comme aujourd'hui?). Il utilise toujours le premier janvier de l'année max par défaut.

Exemple de capture d'écran: J'ai défini ma date maximale au 25/08/2018. Lorsque j'ouvre datepicker, la date par défaut est le 1er janvier 2018. Lorsque je change ma date max 25/08/2020, sera également le 1er janvier 2020. Ce comportement n'est pas attendu.

Mon modèle:

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

Mon contrôleur:

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

Il est possible de le définir uniquement lorsque le programme datepicker s'affiche.

Fonctionne ici 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

Essayez de définir les start et end des variables à la date où l'initialisation du composant:

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

J'ai eu problème comme vous. Dans mon cas, j'ai deux sélecteurs de date et quand je choisis la date de début la première seconde devrait commencer à partir de la date sélectionnée. J'ai corrigé ce problème en ajoutant le délai d'attente défini lors du changement de données dans le premier sélecteur de date.

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