jQuery datepicker disable customize day | Create

 jQuery datepicker disable customize day | Create


1. index.html


<!DOCTYPE html>
<html lang="en">
    <head>
       
        <meta content='Live Demo: Bootstrap simple datepicker example' name='description' />
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">   
    </head>
    <body>       
        <div class="container" style="max-width:800px;margin:0 auto;margin-top:50px;margin-bottom: 50px;">             
            <div class="row">
                <div class="form-group">
                    <label>Select Date:</label>
                    <input type="text" id="example1" class="form-control" placeholder="Click to show the datepicker">
                    <br>                 
                    <br>                 
                    <input type="text" id="example2" class="form-control" placeholder="Click to show the datepicker">                 
                </div>             
            </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

        <!-- date picker -->
        <script>
            $(document).ready(function () {
              var newDate = new Date();
              newDate.setDate(newDate.getDate() + 7);
                $('#example1').datepicker({
                    autoclose: true,
                    format: "dd/mm/yyyy",
                    startDate: newDate
                });
                $('#example2').datepicker({
                    autoclose: true,
                    format: "dd/mm/yyyy",
                });
            });
        </script>
    </body>
</html>
Reactions

Post a Comment

0 Comments