Timepicker doesn't initialize with ngModel

[cyberbobjr]

Hi,
this is my code :

<timepicker [ngModel]="startTime" name="startTime" [hourStep]="1" [minuteStep]="15"
                                [showMeridian]="false"></timepicker>

the startTime variable is initialized inside the ngOnInit function with a specific DateTime object :

let momentTime = moment(this._event.startDateTime * 1000, 'x');
this.startTime = momentTime.toDate();

but the timepicker component never show the value of startTime ! only the the current time :(

Does someone have this problem too ?

[ryanlangton]

Yes same problem here.

As a temporary hack, I've wrapped the TimePickerComponent so I can initialize the value in ngOnInit.

import { ControlValueAccessor } from '@angular/forms/src/directives';
import { TimepickerComponent } from 'ng2-bootstrap';
import { Component, OnInit, Input } from '@angular/core';

/**
 * The MyTimePickerComponent is a hack to get the time picker to initialize correctly from NgModel.
 * Do not change the template or underlying functionality
 * Once the bug in ng2-bootstrap is fixed this component can be removed (just use timepicker instead of sb-timepicker)
 * https://github.com/valor-software/ng2-bootstrap/issues/793
 * 
 * @export
 * @class MyTimepickerComponent
 */
@Component({
	selector: 'my-timepicker',
	template: `
    <table>
      <tbody>
        <tr class="text-center" [ngClass]="{hidden: !showSpinners || readonlyInput}">
          <td><a (click)="incrementHours()" [ngClass]="{disabled: noIncrementHours()}" class="btn btn-link"><span class="glyphicon glyphicon-chevron-up"></span></a></td>
          <td>&nbsp;</td>
          <td><a (click)="incrementMinutes()" [ngClass]="{disabled: noIncrementMinutes()}" class="btn btn-link"><span class="glyphicon glyphicon-chevron-up"></span></a></td>
          <td [ngClass]="{hidden: !showMeridian}" *ngIf="showMeridian"></td>
        </tr>
        <tr>
          <td class="form-group" [ngClass]="{'has-error': invalidHours}">
            <input style="width:50px;" type="text" [(ngModel)]="hours" (change)="updateHours()" class="form-control text-center" [readonly]="readonlyInput" (blur)="hoursOnBlur()" maxlength="2">
          </td>
          <td>:</td>
          <td class="form-group" [ngClass]="{'has-error': invalidMinutes}">
            <input style="width:50px;" type="text" [(ngModel)]="minutes" (change)="updateMinutes()" class="form-control text-center" [readonly]="readonlyInput" (blur)="minutesOnBlur()" maxlength="2">
          </td>
          <td [ngClass]="{hidden: !showMeridian}" *ngIf="showMeridian"><button type="button" [ngClass]="{disabled: noToggleMeridian() || readonlyInput}" class="btn btn-default text-center" (click)="toggleMeridian()">{{meridian}}</button></td>
        </tr>
        <tr class="text-center" [ngClass]="{hidden: !showSpinners || readonlyInput}">
          <td><a (click)="decrementHours()" [ngClass]="{disabled: noDecrementHours()}" class="btn btn-link"><span class="glyphicon glyphicon-chevron-down"></span></a></td>
          <td>&nbsp;</td>
          <td><a (click)="decrementMinutes()" [ngClass]="{disabled: noDecrementMinutes()}" class="btn btn-link"><span class="glyphicon glyphicon-chevron-down"></span></a></td>
          <td [ngClass]="{hidden: !showMeridian}" *ngIf="showMeridian"></td>
        </tr>
      </tbody>
    </table>
  `,
})
export class MyTimepickerComponent extends TimepickerComponent implements ControlValueAccessor, OnInit {
	@Input() initialTime: Date;

	ngOnInit() {
		super.ngOnInit();
		this.writeValue(this.initialTime);
	}
};

Usage:

        <my-timepicker [(ngModel)]="time" 
                    (change)="timeChanged($event)" 
                    [initialTime]="time"
                    [hourStep]="hourStep" 
                    [minuteStep]="minuteStep"
                    [showMeridian]="isMeridian">
        </my-timepicker>

[ryanlangton]

If you use my hack, be aware that the change event will no longer propagate to the parent. To get around this, I implemented AfterViewChecked in my component, do a comparison to the bound value, and perform onChanges actions if they're not equal.