Bootstrap datepicker example text input with date format

In this Article you will know how to use simple bootstrap datepicker example in your HTML form. Using jquery datepicker, you can simply select the current date from a calendar instead of typing manually. Here in below best example i use simple bootstrap datepicker which is going most popular as well as has full-featured with all types of the settings and libraries.

bootstrap datepicker example

The bellow simple example will tell you how to set datepicker using bootstraps datepicker in your HTML Form.

Read Also:  How to Apply jQuery UI Datepicker in WordPress?

Also Read: Simple DateTime range with two inputs Example

Simple Bootstraps datepicker example

index.html

<html>
    <head>
     <title>Bootstraps datepickers example text input with specifying date format - www.pakainfo.com</title>
     <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> 
	</head>
    <body> 
        <input  class="form-control" type="text" placeholder="click to show datepicker"  id="upcomming_movie">
       
        <script type="text/javascript">
            // When the document is ready
            $(document).ready(function () {
                
                $('#upcomming_movie').datepicker({
                    format: "dd/mm/yyyy"
                });  
            
            });
        </script>
 </body>
 </html>

Also Read: Bootstraps datepicker Disable Dates Dynamically in jQuery

If you required to auto closing the date picker which means HTML jquery based datepicker immediately closed after selecting a your date and then you will have to set setting to the autoclose true :

$('#upcomming_movie').datepicker({
    autoclose: true,  
    format: "dd/mm/yyyy"
});