2

I am using Html5 date picker in my project of room reservation system please anybody help me to validate this date picker. Validation must include disabling dates earlier than today's date disabling dates which have been selected earlier for rooms.

    <html>
<body>
<form name="f2" action="payment.jsp" method="get" >
            <label> Date:</label><br>
            From:<input type="date" name="from" id="myDate" value="demo">
            Till:<input type="date" name="till" id="myDate1" value="demo1"><br>
  
 <input type="submit" onclick="myFunction()">
 <script>
    function myFunction() {
    var x = document.getElementById("myDate").value;
    document.getElementById("demo").innerHTML = x;
     var y = document.getElementById("myDate1").value;
    document.getElementById("demo1").innerHTML = y;
}      
</script>
  </body>
  </html>
Saquib Ali
  • 120
  • 1
  • 2
  • 11
  • shouldn't `demo` and `demo1` values be actual dates? like 2016-10-17? – andrew Oct 17 '16 at 09:50
  • also, take a look on this post: http://stackoverflow.com/questions/8574442/how-to-add-validation-restrictions-for-html5-date-field-without-jquery-javascrip. It has some tips you can use – andrew Oct 17 '16 at 09:51
  • It has been already discussed in stack.Please [Refer](http://stackoverflow.com/questions/22335120/jquery-validator-and-datepicker-click-not-validating) – Thala Oct 17 '16 at 09:54
  • Possible duplicate of [JavaScript to validate date](http://stackoverflow.com/questions/4344015/javascript-to-validate-date) – roberrrt-s Oct 17 '16 at 09:58

1 Answers1

2

You don't need JS to accomplish that: There is attr min on html5:

<input type="date" name="from" id="myDate" value="demo" min="2016-10-13">

To update it to the current date, I use todayDate():

$(document).ready(function(){
    $('#myDate').attr('min', todayDate());
});


function todayDate() {
    var today = new Date(); // get the current date
    var dd = today.getDate(); //get the day from today.
    var mm = today.getMonth()+1; //get the month from today +1 because january is 0!
    var yyyy = today.getFullYear(); //get the year from today

    //if day is below 10, add a zero before (ex: 9 -> 09)
    if(dd<10) {
        dd='0'+dd
    }

    //like the day, do the same to month (3->03)
    if(mm<10) {
        mm='0'+mm
    }

    //finally join yyyy mm and dd with a "-" between then
    return yyyy+'-'+mm+'-'+dd;
}
$(document).ready(function(){
    $('#myDate').attr('min', todayDate());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<form name="f2" action="payment.jsp" method="get" >
            <label> Date:</label><br>
            From:<input type="date" name="from" id="myDate" value="demo" min="2016-10-13">
            Till:<input type="date" name="till" id="myDate1" value="demo1"><br>
  
  </body>
  </html>
sandrina-p
  • 3,794
  • 8
  • 32
  • 60