Prevent end date before start date

Quform WordPress v2 DocumentationGuidesCustomizationPrevent 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. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy