web-dev-qa-db-fra.com

Ionic 3 DateTime - Affiche le sélecteur avec la date du moment où le modèle n'est pas défini

Je développe une application avec Ionic 3 et je rencontre un problème avec DateTime composant. Supposons que j'ai un composant DateTime dans l'interface utilisateur et qu'il est facultatif, la valeur par défaut est donc facultative. Il n'y a pas de date minimale et la date maximale est de 2 ans à compter de la date actuelle: 

<ion-datetime displayFormat="DD/MM/YYYY" [(ngModel)]="dataInicial" doneText="Feito"
      cancelText="Cancelar" [max]="maxDate">
</ion-datetime>

export class AbaPedidosConfirmadosPage {

    dataInicial:Date;
    maxDate:string;

    constructor() {
        this.maxDate = moment().add(2, 'years').format('YYYY');
    }
}

La question est donc la suivante: le sélecteur peut-il apparaître avec la date actuelle sélectionnée lorsque le modèle est indéfini (ou nul)? C'est pour la facilité d'utilisation, dans ce cas si l'utilisateur doit sélectionner la date de demain, il faudra changer l'année, puis le mois et enfin le jour; s'il charge le contenu du sélecteur à la date du jour, l'utilisateur n'a plus qu'à changer le jour.

J'ai essayé simplement de créer une directive pour charger la date actuelle au clic, mais elle a été déclenchée après le traitement de l'événement par le composant DateTime:

@Directive({
    selector: '[load-date]'
})
export class LoadDateDirective {

    private lastValue:any;

    @Input() public ngModel:any;
    @Output('ngModelChange') modelChange:EventEmitter<string> = new EventEmitter<string>();

    public constructor(private _elementRef:ElementRef,
                   private _renderer:Renderer) {

    }

    @HostListener('click', ['$event'])
    _click(ev: UIEvent) {
        this.lastValue=this.ngModel;
        if(!this.lastValue) {
            ev.preventDefault();
            ev.stopPropagation();
            this.modelChange.next(moment().format('YYYY-MM-DD'));
        }
    }
}

MODIFIER

Je vais essayer de mieux l'expliquer. Voici le champ actuel. Lorsque l'utilisateur clique dessus, le sélecteur affiche la date maximale configurée:

 Current date picker

N'ayant aucune idée de la date à laquelle l'utilisateur souhaite sélectionner, le comportement souhaité serait le sélecteur apparaissant avec la date actuelle, comme ceci:

 Desired date picker

Comme ces champs sont utilisés pour filtrer les résultats par date, ils sont facultatifs. Par conséquent, le serveur renvoie tout si les dates sont nulles.

angularionic-frameworkangular-directiveionic3
4
brevleq

Il n'y a pas de solution officielle pour cela, mais j'ai implémenté une solution de contournement pour votre problème en appelant le sélecteur de date par programme.

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

     }
 }

J'espère que cela t'aidera.

2
Swapnil Patwa

Quand vous dites: "le modèle est indéfini ou nul", je suppose que la variable "dataInicial" n'a pas été définie.

Si tel est le cas, vous devriez le définir à la date/heure actuelle dans votre constructeur ... quelque chose comme:

constructor() {
        this.maxDate = moment().add(2, 'years').format('YYYY');
        this.dataInicial = moment().format("YYYY-MM-DD); 
        }

le datepicker for Ionic utilise le format de date/heure ISO 8601: AAAA-MM-JJTHH: mmZ pour sa valeur; par conséquent, pour la date à laquelle vous souhaitez lui donner l'apparence de la chaîne "2017-07-19" 

0
William Terrill