Bootstrap datepicker example

In this article, you will learn how to use the bootstrap datepicker in your web page.

Bootstrap is a free, open-source HTML, CSS, and JS framework containing templates for text, forms, buttons, navigation, datetime and other relevant interface components. Bootstrap has become one of the most popular front-end frameworks and open source projects in the world. It was originally created by a designer and a developer at Twitter. Bootstrap includes user interface components, layouts and JS tools along with the framework for implementation.

Bootstrap-datepicker provides a flexible datepicker widget in the Bootstrap style. It is a plugin that adds the function of choosing a date without the need for using custom JavaScript code. It requires to include the bootstrap version 2.0.4 plus and jQuery version 1.7.1 plus.

In the given example, we have included all the required css and js plugins and then specified the input field for the date picker. We have also specified the js code to call the datepicker on input field.

<!DOCTYPE html> 
<html>
    <head>
		<title>Bootstrap datepicker example text input with specifying date format</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> 
		<div class="container">
        <input class="form-control" type="text" placeholder="MM/DD/YYY"  id="getdate">
        <script type="text/javascript">
		$(document).ready(function(){
			var date_input=$('#getdate'); 
			//our date input has the name "date"
			date_input.datepicker({
				format: 'mm/dd/yyyy',
				todayHighlight: true,
				autoclose: true,
			})
		})
        </script>
		</div>
	</body>
</html>

Django bootstrap 4 form template
Bootstrap star rating input example
Bootstrap modal popup example on page load
JavaScript display PDF in the browser using Ajax call
PHP script to read email inbox
Retrieve Data From Database Without Page refresh using AJAX, PHP and Javascript
How to print specific part of a web page in javascript
How to save emoji in MySQL
How to display PDF file in PHP from database
jQuery loop over JSON result after AJAX Success
Dynamically Add/Delete HTML Table Rows Using Javascript
Submit a form data without page refresh using PHP, Ajax and Javascript
PHP Server Side Form Validation
How to add google reCAPTCHA v2 in registration form using PHP
Complete HTML Form Validation in PHP

Bootstrap datepicker example

Related Articles