web-dev-qa-db-ja.com

ngbDatepicker入力を無効にする

ngbDatepickerとng2-datepicker-jalaliを使用しています。以下のようにngbDatepickerディレクティブを使用します。

   <div class="input-group" dir="ltr">
      <input class="form-control" 
          placeholder="yyyy/m/d" 
          name="dp" 
          [(ngModel)]="registerDate" 
          ngbDatepicker 
          [firstDayOfWeek] = "6"
          [disabled]="disabled"
          #d="ngbDatepicker" >
          <button class="input-group-addon" (click)="d.toggle()" type="button">
              <i class="fa fa-calendar"></i>
          </button>
    </div>

私は入力を無効にしようとしています日付ピッカーから日付を強制的に選択します。 [disabled]="disabled"attrは日付ピッカー全体を無効にします。

angularangular2-formsangular2-directivesng-bootstrap
6
Hadi Rasouli

あなたが使用することができます：

[readonly]="true"

<input>これは、入力を読み取り専用入力に変換する効果があります。つまり、ユーザーは日付ピッカーを使用して選択する必要があります。

<div class="input-group" dir="ltr">
  <input class="form-control" 
    placeholder="yyyy/m/d" 
    name="dp" 
    [(ngModel)]="model" 
    ngbDatepicker 
    [firstDayOfWeek] = "6"
    [readonly]="true"
    #d="ngbDatepicker" >
    <button class="input-group-addon" (click)="d.toggle()" type="button">
      <i class="fa fa-calendar"></i>
    </button>
</div>

唯一の問題は、入力のテキストを削除せずに日付ピッカーをクリアする方法がないことです。そのため、必要に応じて日付をクリアするボタンを実装する必要がある場合があります。

<button (click)="clear()" type="button">Clear</button>

public clear(): void {
  this.model = undefined;
}

これがデモです： http://plnkr.co/edit/gYneFD?p=preview

7
Ian A