Angular2 ClockPicker

Question

I am currently exploring all alternatives of clockpicker for a web app working with Angular 2

Something like http://weareoutman.github.io/clockpicker/ for exemple.

I have made researches but everything seems not easy to set up.

Has anyone came across any good solution ?

Thanks !

have you found an answer yet? i am looking for something similar. thx — jay, Sep 27 '17 at 11:07

score 7 · Accepted Answer · answered Nov 03 '17 at 21:28

1st step

Use angular client (https://github.com/angular/angular-cli) to create a new project:

ng new clockpicker-example

2nd step

Install necessary packages:

npm install jquery --save-dev

npm install clockpicker --save-dev

npm install @types/clockpicker --save-dev

3rd step

Inside .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"
  ],

4th step

create a file called 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');
       }
     });
   }
}

5th step

Inside 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>

6th step

Inside typings.d.ts add:

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

Cool, let me know if it worked. U also need to add ClockiPickerDirective to declarationsin app.module.ts. I forgot to add that. If it doesn't work I can create a github repo with a working exampel — LorenzHW, Nov 09 '17 at 17:44
Hi @D1scobo1 Thanks for a great answer, but unfortunately, I can't get it working. The bootstrap-clockpicker.min.js script doesn't seem to run. If you would create a repo with a working example, I'd be very thankful! — prograde, May 18 '18 at 11:42
Sorry for the late response. Here is the repo: https://github.com/LorenzHW/ClockPicker I created that with Ang CLI 6. Furthermore I declared the typings for jQuery inside the directive. You probably shouldn't do that for a real application. Not sure where to define those typings with Angular 6. Check that your paths are correct to the node_modules inside angular.json! — LorenzHW, Jun 22 '18 at 14:55

Angular2 ClockPicker

1 Answers1