Disabling specific days in the datepicker

The Quform WordPress v2 documentation is not yet finished. Please post on the forums if you have any questions in the mean time.

Click here to visit the complete documentation for Quform 1.x

There are two places we need to disable specific days, in the JavaScript for the datepicker and in the PHP for server-side validation. In this example we’ll disable the the days Saturday and Sunday.

Step 1

Go to Forms → Settings → Custom CSS & JS and enter the following code in the Custom JavaScript field.

1
23
4
5
6
7
8
9
10
11
jQuery(document).ready(function ($) {
    var datepicker = $('.quform-field-1_3').data('kendoDatePicker'); 
    if (datepicker) {
        datepicker.setOptions({
            disableDates: function (date) {
                return date && (date.getDay() === 0 || date.getDay() === 6);                
            }
        });
    }
});
jQuery(document).ready(function ($) {
    var datepicker = $('.quform-field-1_3').data('kendoDatePicker');

    if (datepicker) {
        datepicker.setOptions({
            disableDates: function (date) {
                return date && (date.getDay() === 0 || date.getDay() === 6);                
            }
        });
    }
});
  • On line 2, replace 1_3 with the Date element unique ID

Step 2

Add the following code to your theme functions.php file (or create a plugin for it.)

12
3
4
5
6
7
8
9
10
11
add_filter('quform_element_valid_1_3', function ($valid, $value, Quform_Element_Date $element){
    $day = date('w', strtotime($value));
 
    if ($day == 0 || $day == 6) {
        $element->setError('Please choose another day');
        $valid = false;
    }
 
    return $valid;
}, 10, 3);
add_filter('quform_element_valid_1_3', function ($valid, $value, Quform_Element_Date $element)
{
    $day = date('w', strtotime($value));

    if ($day == 0 || $day == 6) {
        $element->setError('Please choose another day');
        $valid = false;
    }

    return $valid;
}, 10, 3);
  • On line 1, replace 1_3 with the Date element unique ID
1
2
3
4
5
6
7
8
9
10
11
12
function my_disable_weekends($valid, $value, Quform_Element_Date $element)
{
    $day = date('w', strtotime($value));
 
    if ($day == 0 || $day == 6) {
        $element->setError('Please choose another day');
        $valid = false;
    }
 
    return $valid;
}
add_filter('quform_element_valid_105_3', 'my_disable_weekends', 10, 3);
function my_disable_weekends($valid, $value, Quform_Element_Date $element)
{
    $day = date('w', strtotime($value));

    if ($day == 0 || $day == 6) {
        $element->setError('Please choose another day');
        $valid = false;
    }

    return $valid;
}
add_filter('quform_element_valid_105_3', 'my_disable_weekends', 10, 3);
  • On line 12, replace 1_3 with the Date element unique ID

Style fixes for Quform version 2.0.1/2.0.0

In these versions there is no visual indicator that the date is disabled, follow the steps below to fix it.

Go to Forms → Settings → Custom CSS & JS and enter the following code in the Custom CSS (All devices) field.

1
2
3
4
5
6
7
8
9
10
11
.quform-datepicker .k-calendar .k-content .k-other-month .k-link {
    color: #999999;
}
.quform-datepicker .k-calendar .k-content .k-state-disabled {
    opacity: 0.7;
    cursor: default !important;
}
.quform-datepicker .k-calendar .k-content .k-state-disabled .k-link {
    color: #999999 !important;
    cursor: default !important;
}
.quform-datepicker .k-calendar .k-content .k-other-month .k-link {
    color: #999999;
}
.quform-datepicker .k-calendar .k-content .k-state-disabled {
    opacity: 0.7;
    cursor: default !important;
}
.quform-datepicker .k-calendar .k-content .k-state-disabled .k-link {
    color: #999999 !important;
    cursor: default !important;
}

Still having trouble? Head over to the forums.

Forums