Here is example to disable past date using jQuery datepicker. this is very useful while making any booking system


File Structure

disable-past-date/
┗ index.html

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery Datepicker to Disable Previous Dates</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <script>
            $(document).ready(function() {

                var minDate = new Date();
                $("#depart").datepicker({
                    showAnim: 'drop',
                    numberOfMonth: 1,
                    minDate: minDate,
                    dateFormat: 'dd-mm-yy',
                    onClose: function(selectedDate) {
                        $("#return").datepicker("option", "minDate", selectedDate);
                    }
                });




                $("#return").datepicker({
                    showAnim: 'drop',
                    numberOfMonth: 2,
                    minDate: minDate,
                    dateFormat: 'dd-mm-yy',
                    onClose: function(selectedDate) {
                        $("#depart").datepicker("option", "maxDate", selectedDate);
                    }
                });

            });

        </script>
        <style>main{width: 70%;margin: 100px auto;}</style>
    </head>
    <body>
    <main>
        <input type="text" placeholder="Origin" id="origin" >
        <input type="text" placeholder="Destination" id="destination" >
        <input type="text" placeholder="Depart Date" id="depart" >
        <input type="text" placeholder="Return Date" id="return">
        <select id="seat">
            <option value="1">1 Seat</option>
            <option value="2">2 Seat</option>
        </select> 
        <input type="submit" value="Search">
    </main>
</body>
</html>


Download source code

Are you facing problems in understanding this article? download source code now