Okay, I played around with this a bit and here's what I came up with. This script when placed in the first time question (timeQuestion1):
- Automatically detects the second date question (timeQuestion2)
- Initiates a timepicker on timeQuestion1
- Puts a listener on timeQuestion1
- When timeQuestion1 is changed, re-initiates a timepicker on timeQuestion2 with minimum hours greater than timeQuestion1
- Enforces the use of the timepickers for the questions
Note that timeQuestion1 and timeQuestion2 must be sequential short-text questions.
Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Identify the questions
var timeQuestion1 = $('#question{QID}');
var timeQuestion2 = timeQuestion1.nextAll('.text-short:eq(0)');
var timeQuestions = $(timeQuestion1).add(timeQuestion2);
// Load the timepicker JS and CSS
var surveyRoot = location.pathname.split('index.php')[0];
$('<link rel="stylesheet" type="text/css" href="'+surveyRoot+'third_party/jquery-ui-timepicker-addon/jquery-ui-timepicker-addon.css" >').appendTo('head');
$.getScript(surveyRoot+'third_party/jquery-ui-timepicker-addon/jquery-ui-timepicker-addon.js', function() {
// Okay, JS is loaded...initialize the Q1 timepicker
$('input[type="text"]', timeQuestion1).timepicker({
timeFormat: "HH:mm",
showTime: true,
onClose: function() {
checkconditions(this.value, this.name, this.type);
q2Timepicker(this.value);
$('button.ui-datepicker-current').show();
$(this).blur();
}
});
if($('input[type="text"]', timeQuestion1).val() != '') {
q2Timepicker($('input[type="text"]', timeQuestion1).val());
}
});
// Hide the "Now" button and enforce using the timepicker
$('input[type="text"]', timeQuestions).attr('readonly', 'readonly').on('click focus', function() {
$('button.ui-datepicker-current').hide();
$("#ui-datepicker-div").position({
my: "left top",
at: "left-3 top-3",
of: $(this)
});
});
// A function to reset Q2 and initialize a timepicker
function q2Timepicker(q1Time) {
var q1Hours = q1Time.split(':')[0];
var minHours = Number(q1Hours) + 1;
var q2Hours = '';
if($('input[type="text"]', timeQuestion2).val() != '') {
q2Hours = $('input[type="text"]', timeQuestion2).val().split(':')[0];
}
if(q1Hours >= q2Hours) {
$('input[type="text"]', timeQuestion2).val('');
}
$('input[type="text"]', timeQuestion2).timepicker('destroy').timepicker({
timeFormat: "HH:mm",
hourMin: minHours,
showTime: true,
onClose: function() {
checkconditions(this.value, this.name, this.type);
$('button.ui-datepicker-current').show();
$(this).blur();
}
});
}
});
</script>
Sample survey:
Topic Author
