禁用 ngbDatepicker 输入

Question

我正在使用 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>

我正在 尝试禁用输入 以强制 select 来自日期选择器的日期。 [disabled]="disabled" attr 禁用整个日期选择器。

Answer 1

您可以使用：

[readonly]="true"

在 <input> 上具有将输入转换为只读输入的效果，这意味着用户将被迫 select 使用日期选择器：

<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

禁用 ngbDatepicker 输入

Disable ngbDatepicker input

angular2-forms

angular2-directives

ng-bootstrap

angular