Datepicker Clock is not updating on selecting time unless blur input manually

[abhi9bakshi]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

On clicking clock in Datepicker, if clock is in hour mode, it should go to minute mode. If clock is in minute mode, datepicker should close and input should display chosen time.

What is the current behavior?

On clicking clock in Datepicker, if clock is in hour mode, it stays in hour mode. On clicking the clock second time, the hour chosen second time is retained and the timepicker closes without asking for minutes. The time is not reflected instantly on input. When user clicks anywhere else, the updated time is reflected on input.

What are the steps to reproduce?

Use Md2-Datepicker in Ionic App The same behaviour is experienced for http://code.promactinfo.com/md2/#/datepicker demo in Google Chrome (Version 58.0.3029.110 (64-bit)) in my System but not in Firefox

What is the use-case or motivation for changing an existing behavior?

The existing behaviour negatively affects the user experience

Which versions of Angular, MD2, OS, browsers are affected?

Angular

@angular/cli: 1.0.5
node: 7.10.0
os: linux x64
@angular/animations: 4.1.3
@angular/cdk: 2.0.0-beta.10
@angular/common: 4.1.3
@angular/compiler: 4.1.3
@angular/compiler-cli: 4.1.3
@angular/core: 4.1.3
@angular/forms: 4.1.3
@angular/http: 4.1.3
@angular/material: 2.0.0-beta.10
@angular/platform-browser: 4.1.3
@angular/platform-browser-dynamic: 4.1.3
@angular/router: 4.1.3

MD2

"md2": "0.0.28",

OS

Desktop: Cinnamon 3.4.0 (Gtk 3.18.9-1ubuntu3.3) 
dm: lightdm 
Distro: Ubuntu 16.04 xenial

Is there anything else we should know?

Steps for solving this Issue

Wrap the function to update time in Zone wrapper to trigger change manually.

In calendar.ts

Replace

  _timeSelected(date: Date): void {
    if (this._clockView !== 'minute') {
      this._activeDate = date;
      this._clockView = 'minute';
    } else {
      if (!this._util.sameDateAndTime(date, this.selected)) {
        this.selectedChange.emit(date);
     
    }
  }

with

  _timeSelected(date: Date): void {
        if (this._clockView !== 'minute') {
            this._ngZone.run(() => {
                this._activeDate = date;
                this._clockView = 'minute';
            });
        }
        else {
            this._ngZone.run(() => {
                if (!this._util.sameDateAndTime(date, this.selected)) {
                    this.selectedChange.emit(date);
                }
            });
        }
    };

[frostbytedata]

I am seeing this exact same behavior.