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.
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"
});