I am looking at having an input [type="time"] What I want is minutes to only show 15 min intervals. So 00, 15, 30 and 45.
<div class="form-group">
<label>Start time</label>
<div class="form-group">
<input type="time" name="start_time" min="09:00" max="18:00" step="00:15" required class="form-control">
</div>
</div>$('.timepicker').timepicker({
timeFormat: 'h:mm p',
interval: 15,
minTime: '09:00',
maxTime: '6:00pm',
defaultTime: '11',
startTime: '09:00',
dynamic: false,
dropdown: true,
scrollbar: true
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
<input type="text" class="timepicker">This is not exactly the same type of input box but it works kind of similarly:
<select id="hourbox"></select>
<select id="minutebox"></select>
<script>
function makenew(value1, value2) {
var option = document.createElement('option');
option.text = value2;
option.value = value1;
return option;
}
var hourSelectionBox = document.getElementById('hourbox');
for(var j = 1; j <= 12; j++){
hourSelectionBox.add(makenew(j, j));
}
var minutesSelectionBox = document.getElementById('minutebox');
for(var j = 0; j < 60; j += 15) {
minutesSelectionBox.add(makenew(j, j));
}
</script>