JSFiddle - React, Tailwind, and code Playground

by Joe

HTML

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://scripts/snippet-javascript-console.min.js"></script>
<link href="https://cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.js"></script>




<div class="row">
  <div>From time:
    <input type="text" id="time" placeholder="Time">
  </div>
  <div>

  </div>To time:
  <input type="text" id="sample" placeholder="Time">
</div>

JavaScript

/* FRom date */
var timepicker = new TimePicker('time', {
  lang: 'en',
  theme: 'dark'
});
timepicker.on('change', function(evt) {

  var value = (evt.hour || '00') + ':' + (evt.minute || '00');
  evt.element.value = value;
});

/* To date */

var joe = new TimePicker('sample', {
  lang: 'en',
  theme: 'dark'
});
joe.on('change', function(e) {

  var value = (e.hour || '00') + ':' + (e.minute || '00');
  e.element.value = value;
});