Simple-timepicker

Installation

Installation is really simple. Just get it via npm:

Demo

Standard

Just create an input element:

<input id="timepicker1">
<script type="text/javascript">
  $("#timepicker1").timepicker();
</script>

This creates a timepicker with standard setup

24 hrs

Just create an input element:

<input id="timepicker2">
<script type="text/javascript">
  $("#timepicker2").timepicker({
      template: false,
      minuteStep: 30,
      showSeconds: false,
      showMeridian: false
    });
</script>

This creates a timepicker with 24 hours and 30 minutes increment.

With seconds and different stepsize

Just create an input element:

<input id="timepicker3" data-minute-step="1" data-show-seconds="true">
<script type="text/javascript">
  $("#timepicker3").timepicker();
</script>

This creates a timepicker with seconds and 1 minute steps.

Setting the time programatically

<button onclick="setTime()">Set time to 9:33 AM</button>
<script type="text/javascript">
      function setTime() {
        $("#timepicker3").timepicker("setTime", "9:33 AM");
      }
</script>

Listening to the change event

<script type="text/javascript">
 $('#timepicker').timepicker().on('changeTime.timepicker', function(e) {
    console.log('The time is ' + e.time.value);
    console.log('The hour is ' + e.time.hour);
    console.log('The minute is ' + e.time.minute);
    console.log('The meridian is ' + e.time.meridian);
  });
</script>