How to I disable previous date selection on elementor form?

Question

How do I disable the previous date selection on elementor form? I make a booking form or I want automatically the previous date selection disabled. Please help, there not have any option to make this, It's Possible by CSS or js, if yes tell me where I put the js or give me js also

I will try but nothing, also I will try some js but not working, can't understand, anyone can solve this, please

Answer 1

Here is the js for single id or multiple ids (make sure find id from inspect)

/*for single id*/

document.addEventListener('DOMContentLoaded', function() {
    var today = new Date();
    var dd = String(today.getDate()).padStart(2, '0');
    var mm = String(today.getMonth() + 1).padStart(2, '0');
    var yyyy = today.getFullYear();
    var formattedToday = yyyy + '-' + mm + '-' + dd;

    var date_input = document.getElementById('yourElementId'); // Replace 'yourElementId' with the actual ID of your element

    // Check if the element with the specified ID exists
    if (date_input) {
        // Set the min and value attributes to today's date
        date_input.setAttribute("min", formattedToday);
        date_input.setAttribute("value", formattedToday);

        // Add an event listener to prevent selecting past dates
        date_input.addEventListener("input", function() {
            var selectedDate = new Date(this.value);
            if (selectedDate < today) {
                this.value = formattedToday;
            }
        });
    }
});


/* for multiple ids */
document.addEventListener('DOMContentLoaded', function() {
    var today = new Date();
    var dd = String(today.getDate()).padStart(2, '0');
    var mm = String(today.getMonth() + 1).padStart(2, '0');
    var yyyy = today.getFullYear();
    var formattedToday = yyyy + '-' + mm + '-' + dd;

    var dateInputIds = ['elementId1', 'elementId2', 'elementId3']; // Replace with your actual element IDs

    dateInputIds.forEach(function(id) {
        var date_input = document.getElementById(id);

        // Check if the element with the specified ID exists
        if (date_input) {
            // Set the min and value attributes to today's date
            date_input.setAttribute("min", formattedToday);
            date_input.setAttribute("value", formattedToday);

            // Add an event listener to prevent selecting past dates
            date_input.addEventListener("input", function() {
                var selectedDate = new Date(this.value);
                if (selectedDate < today) {
                    this.value = formattedToday;
                }
            });
        }
    });
});

or if you want to use class instead of id then use this js 

document.addEventListener('DOMContentLoaded', function() {
    var today = new Date();
    var dd = String(today.getDate()).padStart(2, '0');
    var mm = String(today.getMonth() + 1).padStart(2, '0');
    var yyyy = today.getFullYear();
    var formattedToday = yyyy + '-' + mm + '-' + dd;

    var date_inputs = document.getElementsByClassName('yourclassname');
    

    for (var i = 0; i < date_inputs.length; i++) {

        var date_input = date_inputs[i];

        // Set the min and value attributes to today's date
        date_input.setAttribute("min", formattedToday);
        date_input.setAttribute("value", formattedToday);

        // Add an event listener to prevent selecting past dates
        date_input.addEventListener("input", function() {
            var selectedDate = new Date(this.value);
            if (selectedDate < today) {
                this.value = formattedToday;
            }
        });



    }
});"