2017-11-22 30 views
0

フォームに2つのカレンダーがあります。 1つは開始日で、もう1つは終了日です。私は 'ng-pick-datetime'(https://www.npmjs.com/package/ng-pick-datetime)を使用して、クロスブラウザのカレンダー選択ツールを使用しています。角度2の日付ピッカーの日付配列を無効にする

は、日付0(1970年1月1日)から開始日カレンダーで選択した日付までを終了日カレンダー選択でブロックすることです。

ここでのことは、終了日が開始日の後であることを確認することです。

このため、ng-pick-datetime 'pickerには[disabledDates]プロパティがあり、これは選択できないDateの配列を待機しています。

私が試みているのは、フォームが作成されたときに関数で作成された禁じられた日付の配列に、また終了日カレンダーがフォーカスを得るたびにこのプロパティをバインドすることです。

禁止された日付の配列を印刷して、正しく作成されているか、日付が選択されている日付と日付の間にあるかどうかを確認します。私はこの部分が正常に動作しているように見えます。

ブラウザのコンソールエラーは発生しません。終了日のカレンダー選択ツールで日付をブロックしないでください。

これは私のテンプレートのコードです:私は自分自身に答える

forbiddenDates: Date[] = []; 

ngAfterViewInit(): void { this.getForbiddenEndDates(); } 


// This creates an array of Dates from the beginning of all times to the value of startDate 
getForbiddenEndDates(): void { 
let dateZero: Date = new Date(0); 
let forbiddenDates: Date[] = []; 
while (dateZero <= this.data.startDate){ 
    forbiddenDates.push(new Date(dateZero)); 
    dateZero.setDate(dateZero.getDate() + 1); 
} 
this.forbiddenDates = forbiddenDates; 
} 

Screenshot of the form and the forbidden dates array printed

答えて

0

<div class="input-control col-sm-6" [class.has-error]="startDate.invalid && startDate.dirty"> 
     <label class="control-label" for="startDate">Starting Date *</label> 
     <owl-date-time 
      [(ngModel)]="data.startDate" 
      [dateFormat]="'DD-MM-YYYY'" 
      [inputId]="'startDate'" 
      [placeHolder]="'dd-mm-aaaa'" 
      [type]="'calendar'" 
      [dataType]="'date'" 
      [autoClose]="'true'" 
      id="startDate" 
      name="startDate" 
      #startDate="ngModel" 
      [disabled]="!paramsService.isSolicitante()" 
      [hideClearButton] 
      required> 
     </owl-date-time > 
</div> 

<div class="input-control col-sm-6" [class.has-error]="endDate.invalid && endDate.dirty"> 
     <label class="control-label" for="endDate">Ending Date *</label> 
     <owl-date-time 
      [(ngModel)]="data.endDate" 
      [dateFormat]="'DD-MM-YYYY'" 
      [inputId]="'endDate'" 
      [placeHolder]="'dd-mm-aaaa'" 
      [type]="'calendar'" 
      [dataType]="'date'" 
      [autoClose]="'true'" 
      id="endDate" 
      name="endDate" 
      #endDate="ngModel" 
      [disabled]="!paramsService.isSolicitante()" 
      [hideClearButton]="!paramsService.isSolicitante()" 
      [disabledDates]="'forbiddenDates'" 
      (onFocus)="getForbiddenEndDates()" 
      required> 
     </owl-date-time > 
</div> 

//printing of selected date values: 
<div class="col-sm-6">{{ data.startDate}}</div> 
<div class="col-sm-6">{{ data.endDate}}</div> 

{{ this.forbiddenDates }} //printing of the dates array to check it 

そして、これは、コンポーネントのコード(typescriptです)、ここで問題ほんの一部です。この[disabledDates]テンプレートのプロパティは動的に変更されないため、固定された日付の配列にすぎません。

解決策ははるかに簡単です。このテンプレートプロパティをendDate入力フィールドに追加します。

[min]="data.startDate" 
関連する問題