Datepicker UI becomes ambiguous when changing the date programmatically

[lexmark-awilliams]

If you change the bound date programmatically, the UI is very ambiguous about which date is selected.

In this screenshot, the 19th is the selected date, the 20th is the last date the user has clicked on with the mouse, the 18th is the current date, and the month has been changed using the left and right arrows a few time such that the 1st appears 'pressed'. The currently selected date should be made visually distinct from all the other dates in some way, preferably with a css class that could be overwritten by apps using the datepicker component.

Example code to reproduce:

import { Component, OnInit } from '@angular/core';
import { FORM_DIRECTIVES } from '@angular/forms';
import { DATEPICKER_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap';

@Component({
  selector: 'cui-example-broken-class',
  template: `
    <datepicker
          [(ngModel)]="exampleDate"
          [initDate]="exampleDate"
          [showWeeks]="false"
          minMode="day"
          maxMode="day"
          datepickerMode="day">
    </datepicker>
    <div>
    {{ exampleDate }}
    </div>
  `,
  directives: [DATEPICKER_DIRECTIVES, FORM_DIRECTIVES]
})
export class BrokenCssClassComponent implements OnInit {
  exampleDate: Date = new Date(2016, 4, 5);

  ngOnInit(): void {
    setTimeout(
        () => {
          this.exampleDate = new Date(2016, 4, 10);
        },
        5000);
  }
}

Remember to change the month a few times or you will not see the behavior I have described.

[Redlab1]

+1 Got the same problem in my component.

[kamikaze]

+1