HiClock - A simple timepicker

HiClock is a simple timepicker purely created with html, css and js.

• VanillaJS
• It's easy-to-use in your usual framework
• Awesome UX

To use it is necessary to reference the js and css the component and include the places where you will need the html component.

and call the following code.

   var containerClass = ".hi-clock-container"
   var hiClockList = document.querySelector(containerClass);
   new HiClock(hiClockList[i]);

or if you use in multiples places of your html

  //use in all hi-clock elements
   var containerClass = ".hi-clock-container"
   var hiClockList = document.querySelectorAll(containerClass);
   for(var i = 0; i < hiClockList.length; i++){
        new HiClock(hiClockList[i]);
   }

#JQuery

a JQuery with JSFiddle

you can use the JQuery plugin

    $(".hi-clock-container").hiClock();
    $(".hi-clock-container").on("change", function(ev, clock){
      var time = clock.getTime();
      var date = clock.getDate();
    });

if you use JQuery pure (without plugin)

    $(".hi-clock-container").each(function(){
        new HiClock(this);
    });

#Angular Directive

a quick'n dirty JSFiddle, this example use the HiClockDirective.js content

if you use Angular, can download the hi-clock directive (hiClockDirective.js)

(it is necessary to put the html file in the templates folder)

    module.directive("hiClock", HiClockDirective);

and will use

    <hi-clock></hi-clock>

    <hi-clock ng-time="timeText"></hi-clock>
    <hi-clock ng-date="dateElement"></hi-clock>

can be used in Ionic (with backbutton helper) use the hiClockDirective.ionic.js instead of hiClockDirective.js