Ionic 3 DateTime - 当模型未定义时显示选择器与当前日期

Question

我正在开发使用Ionic 3的应用程序，并且使用DateTime组件发生问题。 Supose我在用户界面中有一个DateTime组件，并且它是可选的，所以默认值是可选的。没有最小日期和最大日期是从当前日起2年内：

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

所以现在的问题是：有没有拣货机出现与当模型是不确定的（或空）选择当前日期的方法吗？这是为了可用性，在这种情况下，如果用户需要选择明天的日期，则需要改变年份，然后是月份，最后是日期;如果它在当前日期加载选择器内容，则用户只需要改变一天。

我tryied刚刚创建指令加载上点击当前日期，但它是一个DateTime组件后解雇proccess事件：

@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

当你说，“该模型是未定义或空值”我假设变量“dataInicial”尚未定义。

如果是这种情况，那么你应该把它定义在你的构造当前的日期/时间...是这样的：

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

对离子的日期选择使用ISO 8601日期时间格式：YYYY- MM-DDTHH：mmZ的值，因此，对于需要使其看起来像字符串“2017-07-19”的日期