How to configure jquery.maskedinput to accept valid dates only?

Question

How do I make for the <input type="text" name="calendar" id="calendar"> accept only correct dates, example of a correct date 01/02/2017 but it is accepting when type 01/20/2017, ie the month 20 does not exist, the type of <input> must continue with "text", follow the example with the problem.

$(document).ready(function(){
  $('#calendar').mask('99/99/9999');
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>
<input type="text" id="calendar" name="calendar">

Answer 1

You can try using HTML5 Pattern.

<input type="text" pattern="(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))" required />

I don’t know if the regular Expression is correct. I removed the information from this post https://stackoverflow.com/questions/17080963/html5-pattern-for-formatting-input-box-to-take-date-mm-dd-yyyy

Answer 2

I believe that’s it:

$(document).ready(function(){
  $('#calendar').mask('99/99/9999');
  });

function validateData(){

    var dob = document.getElementById("calendar").value;
    var data = dob.split("/");

    if (isNaN(Date.parse(data[2] + "-" + data[1] + "-" + data[0]))) {
        document.getElementById("calendar").value = "";
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>
<input type="text" onBlur="validateData()" id="calendar" name="calendar">