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 && $.inArray(date.getDay(), [0, 6]) > -1
            }
        });
    }
});

jQuery(function ($) {
    var datepicker = $('.quform-field-1_3').data('kendoDatePicker');

    if (datepicker) {
        datepicker.setOptions({
            disableDates: function (date) {
                return date && $.inArray(date.getDay(), [0, 6]) > -1
            }
        });
    }
});

• On line 2, replace 1_3 with the Date element unique ID
• (Optional) if you want to disable other days of the week, on line 7 you can adjust the [0, 6] array – this is a comma separated list of weekdays that are disabled (0 = Sunday, 1 = Monday, 2 = Tuesday and so on)

Step 2

Add the following code to your theme functions.php file (or use 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 (in_array($day, array(0, 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 (in_array($day, array(0, 6))) {
        $element->addError('Please choose another day');
        $valid = false;
    }

    return $valid;
}, 10, 3);

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 (in_array($day, array(0, 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 (in_array($day, array(0, 6))) {
        $element->addError('Please choose another day');
        $valid = false;
    }

    return $valid;
}
add_filter('quform_element_valid_105_3', 'my_disable_weekends', 10, 3);

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;
}