web-dev-qa-db-ja.com

Ionic 3 DateTime-モデルが定義されていない場合、現在の日付でピッカーを表示します

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

したがって、質問は次のとおりです。モデルが未定義（またはnull）の場合に、現在の日付が選択された状態でピッカーが表示される方法はありますか？これは使いやすさのためです。この場合、ユーザーが明日の日付を選択する必要がある場合は、年、月、最後に日を変更する必要があります。現在の日付でピッカーコンテンツをロードする場合、ユーザーは曜日を変更するだけで済みます。

クリック時に現在の日付をロードするディレクティブを作成しようとしましたが、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'));
        }
    }
}

[〜＃〜]編集[〜＃〜]

私はそれをよりよく説明しようとします。これが実際のフィールドです。ユーザーがフィールドをクリックすると、ピッカーに構成された最大日付が表示されます。

Current date picker

ユーザーがどの日付を選択したいかわからないので、望ましい動作は、次のように現在の日付で表示されるピッカーです。

Desired date picker

これらのフィールドは日付で結果をフィルタリングするために使用されるため、オプションであり、日付がnullの場合、サーバーはすべてを返します。

angularionic-frameworkangular-directiveionic3
4
brevleq

これに対する公式の解決策はありませんが、プログラムで日付ピッカーを呼び出すことにより、問題の回避策を実装しました。

ここで動作しています プランカー 。

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

     }
 }

これがお役に立てば幸いです。

2
Swapnil Patwa

「モデルが未定義またはnull」と言うときは、変数「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インチ

0
William Terrill