Ionic 3 DateTime - Show selector with current date when model is undefined

Question

I am developing an application using Ionic 3 and I have a problem using DateTime . Suppose I have a DateTime component in the user interface and it is optional, so the default value is optional. There is no minimum date, and the maximum date is 2 years from the current date:

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

So, the question is: is there a way by which the collector is selected with the current date selected with the model undefined (or null)? This is for ease of use, in this case, if the user needs to select a date tomorrow, he will need to change the year, then the month and, finally, the day; if it loads the picker contents on the current date, the user needs to change the day.

, , 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'));
        }
    }
}

. , , :

, , , , :

, , , .

Answer 1

, , .

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

: " undefined null" , "dataInicial" .

, / ... - :

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

datepicker Ionic ISO 8601: YYYY-MM-DDTHH: mmZ , , "2017-07-19"