Prevent end date before start date

The Quform WordPress v2 documentation is not yet finished. Please post on the forums if you have any questions in the mean time.

Click here to visit the complete documentation for Quform 1.x

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(document).ready(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(document).ready(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 your theme functions.php file or create a plugin for it.

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

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

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

    return $valid;
}
add_filter('quform_element_valid_1_4', 'my_end_date_validation', 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

Still having trouble? Head over to the forums.

Forums