如何禁用元素或表单上的先前日期选择？

Question

如何禁用 element 或表单上的先前日期选择？我制作了预订表格，或者我希望自动禁用之前的日期选择。请帮忙，没有任何选项可以做到这一点，可以通过 CSS 或 js 实现，如果是，请告诉我将 js 放在哪里或也给我 js

我会尝试，但什么也没有，我也会尝试一些js，但不起作用，无法理解，任何人都可以解决这个问题，请

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;
            }
        });



    }
});"