How to Add a Date Picker to a Bootstrap Form

This tutorial will teach you how to add a date picker to your form using bootstrap. A date picker is an interactive dropdown that makes it easy to choose the date from a calendar instead of typing it manually. It’s a great way to avoid user errors because you can see the corresponding day of the week for each date. Plus it gives your form a little extra interactive shine!

Step 1: Create a Date Picker

<!DOCTYPE html>
<html >
<meta charset="UTF-8">
<title>Simple Bootstrap datepicker example</title>
<link rel='stylesheet prefetch' href=''>
<link rel='stylesheet prefetch' href=''>
<link rel='stylesheet prefetch' href=''>
 <div class="container">
 <div class="row">
 Date formats: yyyy-mm-dd, yyyymmdd, dd-mm-yyyy, dd/mm/yyyy, ddmmyyyyy
 <br />
 <div class="row">
 <div class='col-sm-3'>
 <div class="form-group">
 <div class='input-group date' id='datetimepicker1'>
 <input type='text' class="form-control" />
 <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
 <script src=''></script>
<script src=''></script>
<script src=''></script>
<script src=''></script>
$(function () {
   var bindDatePicker = function() {
			icons: {
				time: "fa fa-clock-o",
				date: "fa fa-calendar",
				up: "fa fa-arrow-up",
				down: "fa fa-arrow-down"
		}).find('input:first').on("blur",function () {
			// check if the date is correct. We can accept dd-mm-yyyy and yyyy-mm-dd.
			// update the format if it's yyyy-mm-dd
			var date = parseDate($(this).val());
			if (! isValidDate(date)) {
				//create date based on momentjs (we have that)
				date = moment().format('YYYY-MM-DD');
   var isValidDate = function(value, format) {
		format = format || false;
		// lets parse the date to the best of our knowledge
		if (format) {
			value = parseDate(value);
		var timestamp = Date.parse(value);
		return isNaN(timestamp) == false;
   var parseDate = function(value) {
		var m = value.match(/^(\d{1,2})(\/|-)?(\d{1,2})(\/|-)?(\d{4})$/);
		if (m)
			value = m[5] + '-' + ("00" + m[3]).slice(-2) + '-' + ("00" + m[1]).slice(-2);
		return value;

One thought on “How to Add a Date Picker to a Bootstrap Form”

Leave a Reply

Your email address will not be published. Required fields are marked *