jquery-fxtime sample

Simple jquery-fxtime example

by zookeeper

HTML

<script src="https://cdn.jsdelivr.net/gh/RocketMan/jquery-fxtime/dist/jquery-fxtime.min.js"></script>
<h2>jquery-fxtime demo</h2>
<p class='note'>
The input fields below are processed by jquery-fxtime.  The adjacent buttons illustrate programmatic manipulation of the time fields.
</p>
<form>
<p>
Time with seconds:<br>
<input type="text" class="time" id="id1" step="1">
<input type="button" id="bup" value="+ min">
<input type="button" id="bdn" value="- min">
<input type="button" id="bclear" value="clear min"></p>
<p>
Hours and minutes only:<br>
<input type="text" class="time" id="id2">
<input type="button" id="bset" value="set to 14:56">
<input type="button" id="bcleara" value="clear">
</p>
<p>
Must be between 2:00am and 4:30am:<br>
<input type="text" class="time" id="id3" min="02:00" max="04:30" required>
</p>
</form>
<p class='note'>
Source: <a href="https://github.com/RocketMan/jquery-fxtime/" target="_blank">https://github.com/RocketMan/jquery-fxtime/</a>
</p>

CSS

body {
  background: #fff;
  padding: 0 20px;
  font-family: Helvetica;
  font-size: 14px;
}

.note {
  font-size: 12px;
}

input.time {
  font-family: monospace;
  width: 100px;
}

input.time:invalid {
  border: 2px solid #f88;
  border-radius: 2px;
}

JavaScript

$().ready(function() {
  // initialise all time elements
	$("input.time").fxtime();
  
  // set initial value on time elements 1 and 3
  //$("#id1").fxtime('val', '12:34:56');
  $("#id3").fxtime('val', '03:45');
  
  // exercise various fxtime functions
  $("#bup").on('click', function() {
  	$("#id1").fxtime('inc', 1);
  });
  $("#bdn").on('click', function() {
    $("#id1").fxtime('inc', 1, -1); 
  });
  $("#bclear").on('click', function() {
  	$("#id1").fxtime('seg', 1, null);
  });
  $("#bset").on('click', function() {
    $("#id2").fxtime('val', '14:56');
  });
  $("#bcleara").on('click', function() {
    $("#id2").fxtime('val', null);
  });
});