angular - Ionic 3 DateTime - 在模型未定义时显示带有当前日期的选择器

Question

我正在使用 Ionic 3 开发应用程序，但在使用 DateTime 时遇到问题成分。假设我在用户界面中有一个 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');
    }
}

所以问题是:当模型未定义(或为空)时，是否有一种方法可以选择当前日期的选择器？这是为了可用性，在这种情况下，如果用户需要选择明天的日期，则需要更改年份，然后是月份，最后是日期；如果它在当前日期加载选择器内容，用户只需要更改日期。

我试过创建一个指令来在点击时加载当前日期，但它是在 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();
         }

     }
 }

希望对您有所帮助。