How supply string as input for Ngbdatepicker in Angular 8

Question

We are using ngbDatePicker in our application. From backend getting date as a string and ngbDatePicker work with {year: Value, month: Value, day: Value}.

<div class="input-group">
      <input class="form-control" 
          placeholder="yy/mm/dd" 
          [(ngModel)]="registerDate" 
          ngbDatepicker
          #d="ngbDatepicker" >
          <button class="input-group-addon" (click)="d.toggle()" type="button">
              <i class="fa fa-calendar"></i>
          </button>
    </div>

Here registerDate value coming as string.

its not reading string formate how come i make it readble by ngbDatepicker.

What does the date string from back end look like? – Kinglish May 10 '21 at 07:00 — Kinglish, May 10 '21 at 07:00
its "MM/DD/YY" in this formate – shubham May 10 '21 at 07:06 — shubham, May 10 '21 at 07:06

score 0 · Answer 1 · answered May 10 '21 at 07:01

I would suggest you splitting up your [(ngModel)] into two parts (See here How [ngModel] and (ngModelChange) work together?).

Then you could do something like this:

<input class="form-control" 
       placeholder="yy/mm/dd" 

       [ngModel]="getDateAsObject()"
       (ngModelChange)="writeDateToString($event)"

       ngbDatepicker
       #d="ngbDatepicker">

Or you could just temporarily save it in the given format and only transform it to string when needed. Then you could stick to [(ngModel)]... and it would also be more performant.

How supply string as input for Ngbdatepicker in Angular 8

1 Answers1