2016-06-29 8 views
0

私は、ユーザーが開始日に選択したものに応じて終了日のピッカーを調整しようとしています。逆の場合は、終了日を最初に選択するとします。 これは私のコードです:start_dateピッカーに従ってend_dateピッカーを調整する方法とその逆をionic2で調整する方法はありますか?

<ion-item> 
     <ion-label>Start Date</ion-label> 
     <ion-datetime displayFormat="MMM DD, YYYY" pickerFormat="MMM DD YYYY" ngControl="start" [(ngModel)]="start_date"></ion-datetime> 
    </ion-item> 
    <ion-label>{{getDate(start_date | date:'MMddy')}} </ion-label> 
    <ion-item> 
     <ion-label>End Date</ion-label> 
     <ion-datetime displayFormat="MMM DD, YYYY" pickerFormat="MMM DD YYYY" ngControl="end" min="getDate(start_date | date:'MMddy')" ></ion-datetime> 
    </ion-item> 

開始日が新しい日付(のようなコントローラに初期化される)、のgetdate関数は次のとおりです。

getDate(date){ 
    date = date.split('\/'); 
    date = date[2] + '-' + date[0] + '-' + date[1]; 
    return date; 
    } 

前のコードでのラベル:

<ion-label>{{getDate(start_date | date:'MMddy')}} </ion-label> 

正しい結果が得られます:2016-29-06(今日の日付)、終了日のピッカーの場合、これは機能しませんが、終了日時のminプロパティを編集すると機能します:

<ion-datetime displayFormat="MMM DD, YYYY" pickerFormat="MMM DD YYYY" ngControl="end" min="2016-06-29" ></ion-datetime> 

答えて

0

これは働いていました、私は中括弧{{}}をmin式に追加する必要がありました。別の方法はminの代わりに[min]を使用することです。

<ion-item> 
     <ion-label>Start Date</ion-label> 
     <ion-datetime displayFormat="MMM DD, YYYY" pickerFormat="MMM DD YYYY" ngControl="start" [ngModel]="start_date" (ngModelChange)="start_boolean=true" min="{{getDate(today | date:'MMddy')}}"></ion-datetime> 
    </ion-item> 
    <ion-item *ngIf="start_boolean"> 
     <ion-label>End Date</ion-label> 
     <ion-datetime displayFormat="MMM DD, YYYY" pickerFormat="MMM DD YYYY" ngControl="end" min="{{getDate(start_date | date:'MMddy')}}"></ion-datetime> 
    </ion-item> 

とTSファイル内:

は、今日のVARを初期化します。

today: Date = new Date(); 

とのgetdate機能:

getDate(date){ 
    date = date.split('\/'); 
    date = date[2] + '-' + date[0] + '-' + date[1]; 
    let re = /\//gi; 
    date = date.replace(re, "-"); 
    return date; 
    } 
0

あなたは、開始日を格納/取得するための別の方法を作成し、分としてそれを使用することができます。

getStart(){ 
    var minDate = getDate(start_date | date:'MMddy'); 
    return minDate; 
} 

、その後、これにminを変更します。

min="getStart()" 
関連する問題