首页 文章

Ionic 3 DateTime - 当模型未定义时，显示具有当前日期的选取器

提问于
浏览 次
4

我'm developing an application using Ionic 3 and I' m使用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'));
        }
    }
}

EDIT

我会尝试更好地解释它 . 以下是实际字段，当用户在字段中单击时，选择器显示配置的最大日期：

Current date picker

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

Desired date picker

由于这些字段用于按日期过滤结果，因此它们是可选的，因此如果日期为空，服务器将返回所有内容 .

angular ionic-framework angular-directive ionic3

2 回答

  • 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();
         }

     }
 }

    我希望这能帮到您 .

    回复于
  • 0

    当你说“模型未定义或为空”时我假设尚未定义变量“dataInicial” .

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

    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”的日期

    回复于

相关问题