<script>
    document.addEventListener("DOMContentLoaded", function() {

        const inputs = document.querySelectorAll(".date-format");

        inputs.forEach(input => {

            input.setAttribute("maxlength", "10");

            // Allow only numbers + control keys
            input.addEventListener("keydown", function(e) {

                const allowedKeys = [
                    "Backspace", "ArrowLeft", "ArrowRight", "Tab", "Delete"
                ];

                if (
                    !allowedKeys.includes(e.key) &&
                    !/^\d$/.test(e.key)
                ) {
                    e.preventDefault();
                }
            });

            // Auto format + validate
            input.addEventListener("input", function() {

                let value = input.value.replace(/\D/g, '');

                // Format: DD-MM-YYYY
                if (value.length >= 3 && value.length <= 4) {
                    value = value.slice(0, 2) + '-' + value.slice(2);
                } else if (value.length >= 5) {
                    value = value.slice(0, 2) + '-' + value.slice(2, 4) + '-' + value.slice(4, 8);
                }

                input.value = value;

                validateDate(input);
            });
        });

        function validateDate(input) {
            const value = input.value;

            const regex = /^(0[1-9]|[12][0-9]|3[01])-(0[1-9]|1[0-2])-(19|20)\d{2}$/;

            const error = input.closest("div, td, tr")?.querySelector(".error");

            if (regex.test(value) || value.length === 0) {
                if (error) error.style.display = "none";
            } else {
                if (error) error.style.display = "block";
            }
        }

    });
</script>

<footer class="footer-area border-top">

    <div class="container-fluid d-flex h-100">


        <div class="row justify-content-end align-self-center w-100">


            <!-- <form class="form-inline" id="formAddRow"  >-->


            <!--  <input type="hidden" name="rowId" id="rowId">-->

            <!--  <input type="hidden" name="docId" id="docId">-->

            <!--  <label for="email">Title:</label>-->

            <!--  <input type="text" class="form-control" name="title" id="title">-->


            <!--  <label for="pwd">Date:</label>-->

            <!--  <input type="text" class="form-control date-format" name="date" id="date">-->

            <!--  <span class="error" style="display: none">Invalid Date.</span>-->


            <!--  <label for="pwd">Description:</label>-->

            <!--  <input type="text" class="form-control" id="description" name="description">-->

            <!--  <button type="button" id="submit_button" name="submit" class="btn btn-primary">Submit</button>-->

            <!--</form>-->

        </div>

    </div>

</footer>

</body>

</html>