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

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

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

编辑

我会尽力解释得更好。这是实际的字段，当用户点击该字段时，选择器显示配置的最大日期：

因为我不知道用户想要哪个日期 select，期望的行为是选择器与当前日期一起出现，如下所示：

由于这些字段用于按日期过滤结果，因此它们是可选的，因此如果日期为空，服务器 returns 一切。

Answer 1

当你说 "the model is undefined or null" 我假设变量 "dataInicial" 没有被定义。

如果是这种情况，那么您应该在构造函数中将其定义为当前 date/time...类似于：

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

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

Answer 2

对此没有官方解决方案，但我已经通过以编程方式调用日期选择器来解决您的问题。

这里正在工作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();
         }

     }
 }

希望对您有所帮助。

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

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

ionic-framework

angular-directive

ionic3

angular