Prevent end date before start date

This guide will show you how to prevent the end date being before the start date when using two Date elements.

Step 1 – restrict the date choices

Add the following code to the box at Forms → Settings → Custom CSS & JS → Custom JavaScript

1
234
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
jQuery(function ($) {
    var start = $('.quform-field-1_3').data('kendoDatePicker'),        end = $('.quform-field-1_4').data('kendoDatePicker'); 
    if (start && end) {
        start.setOptions({
            change: function () {
                var startDate = start.value(),
                    endDate = end.value();
 
                if (startDate) {
                    startDate = new Date(startDate);
                    startDate.setDate(startDate.getDate());
                    end.min(startDate);
                } else if (endDate) {
                    start.max(new Date(endDate));
                    end.min(new Date(1900, 0, 1));
                } else {
                    start.max(new Date(2099, 11, 31));
                    end.min(new Date(1900, 0, 1));
                }
            }
        });
 
        end.setOptions({
            change: function () {
                var endDate = end.value(),
                    startDate = start.value();
 
                if (endDate) {
                    endDate = new Date(endDate);
                    endDate.setDate(endDate.getDate());
                    start.max(endDate);
                } else if (startDate) {
                    end.min(new Date(startDate));
                    start.max(new Date(2099, 11, 31));
                } else {
                    start.max(new Date(2099, 11, 31));
                    end.min(new Date(1900, 0, 1));
                }
            }
        });
    }
});
jQuery(function ($) {
    var start = $('.quform-field-1_3').data('kendoDatePicker'),
        end = $('.quform-field-1_4').data('kendoDatePicker');

    if (start && end) {
        start.setOptions({
            change: function () {
                var startDate = start.value(),
                    endDate = end.value();

                if (startDate) {
                    startDate = new Date(startDate);
                    startDate.setDate(startDate.getDate());
                    end.min(startDate);
                } else if (endDate) {
                    start.max(new Date(endDate));
                    end.min(new Date(1900, 0, 1));
                } else {
                    start.max(new Date(2099, 11, 31));
                    end.min(new Date(1900, 0, 1));
                }
            }
        });

        end.setOptions({
            change: function () {
                var endDate = end.value(),
                    startDate = start.value();

                if (endDate) {
                    endDate = new Date(endDate);
                    endDate.setDate(endDate.getDate());
                    start.max(endDate);
                } else if (startDate) {
                    end.min(new Date(startDate));
                    start.max(new Date(2099, 11, 31));
                } else {
                    start.max(new Date(2099, 11, 31));
                    end.min(new Date(1900, 0, 1));
                }
            }
        });
    }
});
  • On line 2, replace 1_3 with the Start Date element unique ID
  • On line 3, replace 1_4 with the End Date element unique ID

Step 2 – server side validation

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

123
4
5
6
7
8
9
10
11
12
13
14
15
add_filter('quform_element_valid_1_4', function ($valid, $value, Quform_Element_Date $end) {    $start = $end->getForm()->getElementByName('quform_1_3'); 
    if ($start instanceof Quform_Element_Date && ! $start->isEmpty() && ! $end->isEmpty()) {
        $startDate = new DateTime($start->getValue());
        $endDate = new DateTime($end->getValue());
 
        if ($startDate > $endDate) {
            $end->addError('The end date cannot be before start date');
            $valid = false;
        }
    }
 
    return $valid;
}, 10, 3);
add_filter('quform_element_valid_1_4', function ($valid, $value, Quform_Element_Date $end) {
    $start = $end->getForm()->getElementByName('quform_1_3');

    if ($start instanceof Quform_Element_Date && ! $start->isEmpty() && ! $end->isEmpty()) {
        $startDate = new DateTime($start->getValue());
        $endDate = new DateTime($end->getValue());

        if ($startDate > $endDate) {
            $end->addError('The end date cannot be before start date');
            $valid = false;
        }
    }

    return $valid;
}, 10, 3);
  • On line 1, replace 1_4 with the End Date element unique ID
  • On line 2, replace 1_3 with the Start Date element unique ID
1
2
34
5
6
7
8
9
10
11
12
13
14
15
16
17
function my_end_date_validator($valid, $value, Quform_Element_Date $end)
{
    $start = $end->getForm()->getElementByName('quform_1_3'); 
    if ($start instanceof Quform_Element_Date && ! $start->isEmpty() && ! $end->isEmpty()) {
        $startDate = new DateTime($start->getValue());
        $endDate = new DateTime($end->getValue());
 
        if ($startDate > $endDate) {
            $end->addError('The end date cannot be before start date');
            $valid = false;
        }
    }
 
    return $valid;
}
add_filter('quform_element_valid_1_4', 'my_end_date_validator', 10, 3);
function my_end_date_validator($valid, $value, Quform_Element_Date $end)
{
    $start = $end->getForm()->getElementByName('quform_1_3');

    if ($start instanceof Quform_Element_Date && ! $start->isEmpty() && ! $end->isEmpty()) {
        $startDate = new DateTime($start->getValue());
        $endDate = new DateTime($end->getValue());

        if ($startDate > $endDate) {
            $end->addError('The end date cannot be before start date');
            $valid = false;
        }
    }

    return $valid;
}
add_filter('quform_element_valid_1_4', 'my_end_date_validator', 10, 3);
  • On line 3, replace 1_3 with the Start Date element unique ID
  • On line 17, replace 1_4 with the End Date element unique ID
Be inspired. © 2018 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy