How to get count in timepicker?
How to get count in timepicker?
by Akram kamal
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://jonthornton.github.io/jquery-timepicker/jquery.timepicker.js"></script>
<script src="https://jonthornton.github.io/jquery-timepicker/jquery.timepicker.js"></script>
<link rel="stylesheet" href="https://jonthornton.github.io/jquery-timepicker/jquery.timepicker.css">
<tr>
<th>Start:</th>
<td>
<input type="text" id="start" name="start" />
</td>
</tr>
<tr>
<th>Length of meeting</th>
<td>
<select name="meeting" id="meeting">
<option value="0">--Select length--</option>
</select>
</td>
</tr>
<tr>
<th>End:</th>
<td>
<input type="text" id="end" name="end">
</td>
</tr>
JavaScript
$(function () {
for (var i = 5; i <= 60; i += 5) {
$('#meeting').append('<option value="' + i + '">' + i + ' min' + '</option>');
}
function setEndTime() {
var meetingLength = parseInt($('#meeting').find('option:selected').val() || 0),
selectedTime = $('#start').timepicker('getTime');
selectedTime.setMinutes(selectedTime.getMinutes() + parseInt(meetingLength, 10), 0);
$('#end').timepicker('option', 'minTime', selectedTime)
.timepicker('setTime', selectedTime);
console.log(selectedTime)
}
function setMeetingLength() {
var meetingTime = ($('#end').timepicker('getTime') - $('#start').timepicker('getTime')) / 60000
$('#meeting').val(meetingTime)
console.log("setMeetingLength", this, meetingTime)
}
$('#start').timepicker({
'minTime': '8:00 AM',
'maxTime': '9:00 PM',
'step': 5
}).on('changeTime', setEndTime);
$('#end').timepicker({
'minTime': '8:00 AM',
'maxTime': '9:00 PM'
}).on('changeTime', setMeetingLength);
$('#meeting').on('change', setEndTime);
});