Disable ngbDatepicker input

Question

Im using ngbDatepicker and ng2-datepicker-jalali. I use ngbDatepicker directive like below:

   <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>

I'm trying to disable input to force select date from datepicker. [disabled]="disabled" attr disables whole datepicker.

Hamnet

Answer 1

You could use:

[readonly]="true"

on the <input> which has the effect of turning the input into a readonly input meaning the user will be forced to select using the date picker:

<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>

The only problem is there is no way I can find to clear the datepicker without deleting the text in the input, so you may need to implement a button to clear the date if required:

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

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

Here's a demo: http://plnkr.co/edit/gYneFD?p=preview

Koralle

@lan A awesome! this works. yeah you are right, i need a button to clear the datepicker – Hamnet

This will cause input to look like it is disabled (greyed out). I used a hack of setting background color white for input having datepicker. – Dornick