node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org ยป


Time picker for Angular2

Angular2 wrapper around jQuery time picker by


  1. Angular2 version 2.1.1
  2. Typescript version>1.8
  3. jQuery version> 1.7

Note: This component is compatible with beta version of angularjs2


  <input type="text" class="timepicker" 
  [options]="{disableTextInput: false,
		      'timeFormat': 'h:i A',
		      showDuration: false}"/>

Add TimePickerComponent into your component directives. Time picker is applied only if your input component has class 'timepicker'.

You can use ngModel bidings and also listen to events in angular2 way. The model is updated with the value as per the format given in the options.


     <input type="text" [ngModel]="time" (changeTime)="doSomething();"
  class="form-control timepicker" [ngClass]="custom-cls"
  [options]="{disableTextInput: false,'timeFormat':'HH:mm',showDuration:false}"/>


import {TimePickerComponent} from "angular2-timepicker/timepicker-component";

Options and Events:

Usage same as mentioned in

Changing the options handles the destroy and initialize of time picker component by itself with new options.


Submit a issue in github with details of your problems. You can also use Plunker. Donot forget to mention the AngularJS2 version which you are using.