DatePicker Contact form 7

Question

I am trying to put a minimum date in my contact form 7, in the calendar it works normally, but if the user goes with the keyboard he can put an earlier date. How can I make it so that the user can't go beyond the minimum date on the keyboard?

<label class="lbl" for="date">Dates <sup>   &#8727;</sup> : </label>
[date* date id:dates class:form-control date-format:dd/mm/yy first-day:1 placeholder ""]
<script>
var today = new Date();
today.setDate(today.getDate() - 0);
today = today.toISOString().split('T')[0];
document.getElementsByName("date")[0].setAttribute('min', today);
</script>

Answer 1

This javascript could make the magic.

document.getElementsByName("date")[0].addEventListener("change", function(e){
    var min = this.getAttribute('min');
    
    if(this.value < min){
       this.value = min;
       /*
        you can also set a message to warn the user that the value has 
        changed because it has a min date. 
       */
    }
});