I'm developing an application using Ionic 3 and I'm having a issue using DateTime component. Supose I have a DateTime component in the user interface, and it is optional, so, the default value is optional. There is no min date and max date is 2 years from 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 the picker appears with current date selected when the model is undefined (or null)? This is for usability, in this case if the user needs select tomorrow date, it will need change the year, then the month and finally the day; if it loads the picker content in the current date, the user only need change the day.
I've tryied just create a directive to load the current date on click, but it was fired after the DateTime component proccess the event:
@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'));
}
}
}
EDIT
I will try to explain it better. Here is the actual field, when the user clicks in the field, the picker shows the max date configured:
As I have no idea of which date user wants select, the desired behaviour would be the picker appearing with the current date, like this:
As these fields are used to filter the results by date, they are optional, so the server returns everything if the dates are null.

