1er paso

Use el cliente angular ( https://github.com/angular/angular-cli ) para crear un nuevo proyecto:

ng new clockpicker-example

2do paso

Instale los paquetes necesarios:

npm install jquery --save-dev

npm install jquery --save-dev

npm install clockpicker --save-dev

npm install @types/clockpicker --save-dev

3er paso

Dentro de .angular-cli.json:

 "styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css", "../node_modules/clockpicker/dist/bootstrap-clockpicker.min.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js", "../node_modules/clockpicker/dist/bootstrap-clockpicker.min.js" ],

4to paso

cree un archivo llamado clockpicker.directive.ts

 import {Directive, ElementRef, OnInit} from "@angular/core"; @Directive({ selector: '[appClockPicker]' }) export class ClockPickerDirective implements OnInit { constructor(private el: ElementRef) {} ngOnInit(): void { $(this.el.nativeElement).clockpicker({ placement: 'bottom', align: 'left', donetext: 'Done', afterDone: () => { console.log('done'); } }); } }

5to paso

Dentro app.component.html :

 <div class="input-group" appClockPicker> <input type="text" class="form-control" value="09:30"> <span class="input-group-addon"> <span class="glyphicon glyphicon-time"></span> </span> </div>

6to paso

Dentro typings.d.ts agregar:

 declare var $: any; declare var jQuery: any;