datepicker validation lets bad date text field get through

datepicker validation lets bad date text field get through

My datepicker widget will let an incorrect date format through the second time it is filled in, giving the web surfer a "NaN" output instead of catching it and focusing on the datepicker text input field. What is my solution? Thank you greatly.

<script type="text/javascript">
$(document).ready(function(){
document.getElementById("warning").innerHTML = " ";
    $("#datepicker").datepicker();
    $("#datepicker").blur(function(){
        val = $(this).val();
        val1 = Date.parse(val);
        if (isNaN(val1)==true && val!==''){
           document.getElementById("warning").innerHTML = "please use full date";
           document.getElementById("datepicker").focus();
        }
        else{
           console.log(val1);
        }
    });
});
</script>   


<script type="text/javascript">
function myFunction() {

var x = document.getElementById("datepicker").value;

var msec = Date.parse(x);
 
var current = new Date();

var currentmsec = Date.parse(current);

var interval = currentmsec - msec;

var days = interval / 86400000;

var e = Math.floor(days);

var n = e.toString();

var h = n.replace(/\B(?=(\d{3})+(?!\d))/g, ",");

var c = "you have been sober " + h + " days, one day at a time!";
    
document.getElementById("demo").innerHTML = c;
}
</script> 





<span id="warning"></span>
<br />
use the datepicker, or enter your sobriety date as mm/dd/yyyy or m/d/yyyy.
<br />
<span>day of last drink or drug: <input type="text" id="datepicker"></span> 

<button onclick="myFunction()">calculate</button>
<br />
<span id="demo"></span>