Jetformbuilder, JavaScript Snippet to Disable Past Dates for Jetformbuilder

gistfile1.txt

UPDATED: 07.05.2024

Jetformbuilder, Datefield, Disable Past Dates.
1. Copy the code, and create a JS Snippet , and paste the code to your snippet plugin, and save it as header / footer.
2. Then create a date field, and click block, then scroll down to advanced, add your classname there.
3. Dont forget to add the classnames to: input.ADD YOUR CLASSNAME HERE.jet-form-builder__field.date-field
its three places you have to add the classname to.
4. This code support multiple date fields and you can use the same classname.
_____________________________________________________________________

// JavaScript Snippet to Disable Past Dates for Jetformbuilder
jQuery(document).ready(function($) {
    // Function to disable past dates
    function disablePastDates() {
        // Selector for the date field (class)
        var dateFieldSelector = 'input.ADD YOUR CLASSNAME HERE.jet-form-builder__field.date-field';

        // Initialize or update the date field
        $(dateFieldSelector).attr('min', function() {
            var today = new Date();
            var dd = String(today.getDate()).padStart(2, '0');
            var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
            var yyyy = today.getFullYear();

            // Format today's date as YYYY-MM-DD
            return yyyy + '-' + mm + '-' + dd;
        });
    }

    // Run the function to disable past dates
    disablePastDates();

    // Re-run the function if the form is dynamically updated or on field focus
    $(document).on('focus', 'input.ADD YOUR CLASSNAME HERE.jet-form-builder__field.date-field', function() {
        disablePastDates();
    });

    // Optional: Consider reapplying the min date when the field changes
    $(document).on('change', 'input.ADD YOUR CLASSNAME HERE.jet-form-builder__field.date-field', function() {
        disablePastDates();
    });
});

It works.

Thank you so much.

It works.

Thank you so much.

U welcome👍🏻