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>
<script src="https://https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.css"></script>


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

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

JavaScript

var timepicker = new TimePicker(['time', 'sample'], {
  lang: 'en',
  theme: 'dark'
});
timepicker.on('change', function(evt) {

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

$(document).ready(function() {
  $(".toDate").change(function() {
    var selDate = $(this).val();
    console.log(selDate);
    alert('yes');
  });
});