Bootstrap datepicker example

bootstrap 4 datepicker w3schools
bootstrap 4 datepicker w3schools
bootstrap 4 datepicker w3schools

In this tutorial you’ll learn to use simple datepicker in your form. Using Bootstrap 4 datepicker, you’ll easily choose the go back a calendar rather than typing manually.Here in below example we use bootstrap 4 datepicker which goes hottest and has full-featured libraries.

The following example will tell you ways to line datepicker using bootstrap datepicker.

HTML

<div class="container">
     <h2>Bootstrap Datepicker Examples</h2>
     <div class="row">
        <div class="col-md-3">
           <input  class="form-control" type="text" placeholder="Salect Date"  id="example1">
        </div>
     </div>
   </div>

Javascript

<script type="text/javascript">
            $(document).ready(function () {
                $('#example1').datepicker({
                    format: "dd/mm/yyyy"
                });  
            
            });
</script>

Add these Files in Head section

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">  
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>

Leave a Reply

avatar
  Subscribe  
Notify of