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
2345
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
45
46
47
48
49
50
51
jQuery(function ($) {
    var start = $('.quform-field-1_3').data('kendoDatePicker'),        end = $('.quform-field-1_4').data('kendoDatePicker'),        daysBetween = 0; 
    if (start && end) {
        start.setOptions({
            change: function () {
                var startDate = start.value(),
                    endDate = end.value(),
                    newStartMax, newEndMin;
 
                if (startDate) {
                    newEndMin = new Date(startDate);
                    newEndMin.setDate(newEndMin.getDate() + daysBetween);
                    end.min(newEndMin);
                } else if (endDate) {
                    newStartMax = new Date(endDate);
                    newStartMax.setDate(newStartMax.getDate() - daysBetween);
                    start.max(newStartMax);
                    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(),
                    newStartMax, newEndMin;
 
                if (endDate) {
                    newStartMax = new Date(endDate);
                    newStartMax.setDate(newStartMax.getDate() - daysBetween);
                    start.max(newStartMax);
                } else if (startDate) {
                    newEndMin = new Date(startDate);
                    newEndMin.setDate(newEndMin.getDate() + daysBetween);
                    end.min(newEndMin);
                    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'),
        daysBetween = 0;

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

                if (startDate) {
                    newEndMin = new Date(startDate);
                    newEndMin.setDate(newEndMin.getDate() + daysBetween);
                    end.min(newEndMin);
                } else if (endDate) {
                    newStartMax = new Date(endDate);
                    newStartMax.setDate(newStartMax.getDate() - daysBetween);
                    start.max(newStartMax);
                    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(),
                    newStartMax, newEndMin;

                if (endDate) {
                    newStartMax = new Date(endDate);
                    newStartMax.setDate(newStartMax.getDate() - daysBetween);
                    start.max(newStartMax);
                } else if (startDate) {
                    newEndMin = new Date(startDate);
                    newEndMin.setDate(newEndMin.getDate() + daysBetween);
                    end.min(newEndMin);
                    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
  • On line 4, replace 0 with the desired difference between the start and end date (optional). For example, set this to 1 to restrict the end date to the day after the start date.

Step 2 – server side validation

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

1234
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
add_filter('quform_element_valid_1_4', function ($valid, $value, Quform_Element_Date $end) {    $start = $end->getForm()->getElementByName('quform_1_3');    $daysBetween = 0; 
    if ($start instanceof Quform_Element_Date && ! $start->isEmpty() && ! $end->isEmpty()) {
        $startDate = new DateTime($start->getValue());
        $endDate = new DateTime($end->getValue());
 
        if ($daysBetween > 0) {
            $startDate->modify('+' . $daysBetween . ' days');
        }
 
        if ($startDate > $endDate) {
            $end->addError('Please choose a later 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');
    $daysBetween = 0;

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

        if ($daysBetween > 0) {
            $startDate->modify('+' . $daysBetween . ' days');
        }

        if ($startDate > $endDate) {
            $end->addError('Please choose a later 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
  • On line 3, replace 0 with the desired difference between the start and end date (optional). For example, set this to 1 to restrict the end date to the day after the start date.
1
2
345
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function my_end_date_validator($valid, $value, Quform_Element_Date $end)
{
    $start = $end->getForm()->getElementByName('quform_1_3');    $daysBetween = 0; 
    if ($start instanceof Quform_Element_Date && ! $start->isEmpty() && ! $end->isEmpty()) {
        $startDate = new DateTime($start->getValue());
        $endDate = new DateTime($end->getValue());
 
        if ($daysBetween > 0) {
            $startDate->modify('+' . $daysBetween . ' days');
        }
 
        if ($startDate > $endDate) {
            $end->addError('Please choose a later 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');
    $daysBetween = 0;

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

        if ($daysBetween > 0) {
            $startDate->modify('+' . $daysBetween . ' days');
        }

        if ($startDate > $endDate) {
            $end->addError('Please choose a later 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 4, replace 0 with the desired difference between the start and end date (optional). For example, set this to 1 to restrict the end date to the day after the start date.
  • On line 22, replace 1_4 with the End Date element unique ID
Be inspired. © 2020 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy