The simple solution is to use a Select Menu element and just enter the available times as options, instead of using the Time element.
If you want to use the Time element you will need to specify the available times by following the steps below.
Step 1
Add the following code to the theme functions.php file (or create a plugin for it).
12 3 4 5 6 7 8 9 10 11 12 1314 15 16 17 18 19 | add_filter('quform_element_valid_1_3', function ($valid, $value, Quform_Element_Time $element) { if ( ! in_array($value, my_get_available_times())) { $element->addError('This time is not available'); $valid = false; } return $valid; }, 10, 3); function my_get_available_times() { return array( '09:00', '09:30', '10:00', '10:30', '11:00', '11:30' ); } add_action('wp_footer', function () { printf('<script>var timePickerTimes = %s;</script>', wp_json_encode(my_get_available_times())); }); |
add_filter('quform_element_valid_1_3', function ($valid, $value, Quform_Element_Time $element) {
if ( ! in_array($value, my_get_available_times())) {
$element->addError('This time is not available');
$valid = false;
}
return $valid;
}, 10, 3);
function my_get_available_times()
{
return array(
'09:00', '09:30', '10:00', '10:30', '11:00', '11:30'
);
}
add_action('wp_footer', function () {
printf('<script>var timePickerTimes = %s;</script>', wp_json_encode(my_get_available_times()));
});- On line 1, replace
1_3with the Time element unique ID - On line 13, change the available times to suit (in 24 hour clock times)
1 2 3 4 5 6 7 8 9 1011 12 13 14 1516 17 18 19 20 21 22 23 | function my_check_time_available($valid, $value, Quform_Element_Time $element) { if ( ! in_array($value, my_get_available_times())) { $element->addError('This time is not available'); $valid = false; } return $valid; } add_filter('quform_element_valid_1_3', 'my_check_time_available', 10, 3); function my_get_available_times() { return array( '09:00', '09:30', '10:00', '10:30', '11:00', '11:30' ); } function my_print_available_times() { printf('<script>var timePickerTimes = %s;</script>', wp_json_encode(my_get_available_times())); } add_action('wp_footer', 'my_print_available_times'); |
function my_check_time_available($valid, $value, Quform_Element_Time $element)
{
if ( ! in_array($value, my_get_available_times())) {
$element->addError('This time is not available');
$valid = false;
}
return $valid;
}
add_filter('quform_element_valid_1_3', 'my_check_time_available', 10, 3);
function my_get_available_times()
{
return array(
'09:00', '09:30', '10:00', '10:30', '11:00', '11:30'
);
}
function my_print_available_times()
{
printf('<script>var timePickerTimes = %s;</script>', wp_json_encode(my_get_available_times()));
}
add_action('wp_footer', 'my_print_available_times');- On line 10, replace
1_3with the Time element unique ID - On line 15, change the available times to suit
Step 2
Go to Forms → Settings → Custom CSS & JS and at the Custom JavaScript field enter the following code.
1
23
4
5
6
7
8
9
10
11
12
13
14
15
16
| jQuery(function ($) { var $timePicker = $('.quform-field-1_3').data('kendoTimePicker'); if ($timePicker && window.timePickerTimes) { var dates = [], parts; for (var i = 0; i < timePickerTimes.length; i++) { parts = timePickerTimes[i].split(':'); dates.push(new Date(2000, 0, 1, parseInt(parts[0], 10), parseInt(parts[1], 10))); } $timePicker.setOptions({ dates: dates }); } }); |
jQuery(function ($) {
var $timePicker = $('.quform-field-1_3').data('kendoTimePicker');
if ($timePicker && window.timePickerTimes) {
var dates = [], parts;
for (var i = 0; i < timePickerTimes.length; i++) {
parts = timePickerTimes[i].split(':');
dates.push(new Date(2000, 0, 1, parseInt(parts[0], 10), parseInt(parts[1], 10)));
}
$timePicker.setOptions({
dates: dates
});
}
});- On line 2, replace
1_3with the Time element unique ID
Step 3
If any of the times are not a multiple of 30, you will need to edit the form and to to the Time element settings, on the Data tab at the option Minute interval enter the number 1 and save the form.