Disabling specific days in the datepicker

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(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(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->addError('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->addError('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->addError('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->addError('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