Angular 2 time input two way binding

I have a problem with 2 way binding a time input. I can not find a way to accomplish this.

Here is an example in plnkr

And here is my code:

import {Component} from 'angular2/core'

  selector: 'my-app',
  providers: [],
  template: `
      Date: <input [(ngModel)] = "date"/>
      Time: <input type="time" [(valueAsDate)] = "date" />

  directives: []
export class App {
  date = new Date();
  constructor() { = 'Angular2'

Leave a Reply

2 Comment threads
0 Thread replies
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
newest oldest most voted
Notify of

I see several way to do that: Set the type to date in your input but it’s not cross browser: <input type="date" .../> Use an Angular2-compliant date picker like ng2-datepicker. <datepicker [(ngModel)]=""></datepicker> See this question for more details: How to use date picker in Angular 2? Another way would be to implement a custom value accessor to parse / format the string of the input from / to a date object. Here is a way to do that: const DATE_VALUE_ACCESSOR = new Provider( NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => DateValueAccessor), multi: true}); @Directive({ selector: 'input[type=date]', host: { '(input)': 'doOnChange($' }, providers: [… Read more »


I would recommend a flexible visual time picker for angular 2+, you can install it easily using: npm install amazing-time-picker --save then, open your app.module.ts and add to your module: import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AmazingTimePickerModule } from 'amazing-time-picker'; // this line you need import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AmazingTimePickerModule // this line you need ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Please read api to understand how to use this module here: It would looks something… Read more »