Angular Bootstrap Datepicker not binding

Question

I'm trying to use a datepicker and it doesn't seem to be displaying in the input control. The data is coming back correctly because I can pipe it out to the screen and see it.

Angular version: "@angular/core": "~11.2.11"
bootstrap version: "@ng-bootstrap/ng-bootstrap": "^10.0.0", "bootstrap": "^4.6.0"

Data (date) being returned:

"2020-10-21T09:39:04.357"

I would like to output just month, day and year.

even if I return a string of "2016-05-10" that does not display either.

If I select a date from the calendar it updates my model correctly. It displays it as:

{ "year": 2021, "month": 8, "day": 12 }

I tried declaring a variable and binding to that and it didn't work either. My variable was :

bsValue = new Date();

<div class="input-group">
  <input class="form-control" placeholder="yyyy-mm-dd"
      name="lastActivityDate" [(ngModel)]="user.lastActivityDate"
      ngbDatepicker #d2="ngbDatepicker">
  <div class="input-group-append">
    <div class="input-group-text" (click)="d2.toggle()">
      <i class="fa fa-calendar" style="cursor: pointer;"></i>
    </div>
  </div>
</div>

Answer 1

In your component add the DatePipe to the constructor and initialize your date:

constructor(
  private datePipe: DatePipe
) { }

yourForm: any = {
  date: this.datePipe.transform(new Date(1999, 6, 15), "yyyy-MM-dd")
}

In your template:

<form>
  <div class="form-group">
    <label for="date">Date</label>
    <input
      type="date"
      name="date"
      id="date"
      class="form-control"
      [(ngModel)]="yourForm.date"
    />
  </div>
</form>

type="date" will make it so the format of the date is localized. If your browser is set to a locale where the format is 'dd-MM-yyyy' it will be shown the way you want.

In yout module:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [DatePipe], // <-----
  bootstrap: [AppComponent]
})

Answer 2

According to NG-Bootstrap DatePicker Date model and format,

Datepicker uses NgbDateStruct interface as a model and not the native Date object.

Hence you need to cast Date String to NgbDateStruct or NgbDate type to bind to [(ngModel)].

---

Solution 1: Cast date string to NgbDate or NgbDate type.

Cast to NgbDate type

import { NgbDate } from '@ng-bootstrap/ng-bootstrap';

let date = new Date("2020-10-21T09:39:04.357");
let dateModel: NgbDate = new NgbDate(
  date.getFullYear(),
  date.getMonth() + 1,
  date.getDate())
);

Cast to NgbDateStruct type

import { NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';

let date = new Date("2020-10-21T09:39:04.357");
let dateModel: NgbDateStruct =  {
  year: date.getFullYear(),
  month: date.getMonth() + 1,
  day: date.getDate()
};

Sample Solution 1 on StackBlitz

---

Solution 2: Apply Custom Date Adapter

Custom Date Adapter allows binding Date String to [(ngModel)] with customized date string format.

date.adapter.ts

import { Injectable } from '@angular/core';
import {
  NgbDateAdapter,
  NgbDateParserFormatter,
  NgbDateStruct
} from '@ng-bootstrap/ng-bootstrap';

/**
 * This Service handles how the date is represented in scripts i.e. ngModel.
 */
@Injectable()
export class CustomAdapter extends NgbDateAdapter<string> {
  readonly DELIMITER = '-';

  fromModel(value: string | null): NgbDateStruct | null {
    if (value) {
      let date = new Date(value);
      return {
        day: date.getDate(),
        month: date.getMonth() + 1,
        year: date.getFullYear()
      };
    }
    return null;
  }

  toModel(date: NgbDateStruct | null): string | null {
    if (date) {
      let dateObj = new Date(date.year, date.month - 1, date.day);
      return dateObj.toISOString();
    }

    return null;
  }
}

/**
 * This Service handles how the date is rendered and parsed from keyboard i.e. in the bound input field.
 */
@Injectable()
export class CustomDateParserFormatter extends NgbDateParserFormatter {
  readonly DELIMITER = '/';

  parse(value: string): NgbDateStruct | null {
    if (value) {
      let date = new Date(value);
      return {
        day: date.getDate(),
        month: date.getMonth() + 1,
        year: date.getFullYear()
      };
    }
    return null;
  }

  format(date: NgbDateStruct | null): string {
    return date
      ? date.day + this.DELIMITER + date.month + this.DELIMITER + date.year
      : '';
  }
}

app.module.ts

import {
  NgbDateAdapter,
  NgbDateParserFormatter,
  NgbModule
} from '@ng-bootstrap/ng-bootstrap';
import { CustomAdapter, CustomDateParserFormatter } from './datepicker-adapter';

@NgModule({
  ...
  providers: [
    { provide: NgbDateAdapter, useClass: CustomAdapter },
    { provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter }
  ]
})
export class AppModule {}

Sample Solution 2 on StackBlitz

---

References

Custom date adapter and formatter