JSFiddle - React, Tailwind, and code Playground

by Castrolol

HTML

<link rel="stylesheet" href="http://cdn.rawgit.com/castrolol/HiClock/master/css/hi-clock.css">
<script src="https://rawgit.com/castrolol/HiClock/master/js/hiClock.js"></script>
<div ng-app="exampleModule">
  <div ng-controller="Controller">
      Time: <label> {{time}} </label> <br />
      Date: <label> {{date| date:'dd/MM/yyyy HH:mm:ss '}} </label>
    <hr>
        <div>
            <label>Time Text: </label><hi-clock ng-time="time" class="positive"></hi-clock>
        </div>
        <div>
            <label>Date Value: </label><hi-clock ng-date="date" class="positive"></hi-clock>
        </div>
  </div>
</div>

CSS

.hi-clock .h-numbers .el {
    padding-right: 3px;
}

JavaScript

var htmlTemplate = "";

function Controller($scope) {
    $scope.time = '00:00';
    $scope.date = new Date();
}

angular
    .module('exampleModule', [])
    .directive('hiClock', function(){
           
          return {
            restrict: 'E',
            template: htmlTemplate,
            scope: {
              'ngTime' : '=',
              'ngDate' : '='
            },
            link: function (scope, element) {
        
              [].forEach.call(element,function(el){
                var clock = new HiClock(el);
        
                scope.$watch("ngTime", function( newValue, oldValue){
                  clock.inputElement.value = newValue || "";  
                });
        
                scope.$watch("ngDate", function(newValue, oldValue){
                  var date = newValue;
                  if( date && date instanceof Date ){
                     clock
                       .setHour(date.getHours(), true)
                       .setMin(date.getMinutes(), true);  
                  }else{
                      clock.inputElement.value = "";
                  }
                });
                  setTimeout(function(){
                  
                    clock.on("change" , function(){
                      scope.ngTime = clock.getTime();
                      scope.ngDate = clock.getDate();
                      scope.$apply();
                    });
                  },100);
                
              });
            }
          };
        
    });



//not necessary if you use the HiClockDirective.js with template hi-clock.html
htmlTemplate = '<input type="text" readonly="readonly" class="" /><div class="hi-clock-container"><div class="hi-clock hr" >   <h1 class="h-title ">Selecione a Hora</h1>     <h1 class="h-time">      <span class="h-hour">00</span>:<span class="h-min">00</span>    </h1>    <div class="h-clock-e">      <div class="h-numbers h-min">          <span class="el i-0 h-2-dig">0</span>          <span class="el...