Blog

This tutorial will teach you how to add a date picker to your form using open source tools. 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!

Bootstrap-Datepicker Plugin

We'll be using the Bootstrap-Datepicker plugin to handle all the dirty work. There are a number of date picker options out there, but Bootstrap-Datepicker is one of the most popular and full-featured libraries available. However, if instead of a single date, you want a date picker to extend across a range of dates, you might consider this option.

The date picker plugin is available via CloudFlare CDN or you can download it from Github.

Prerequisites

To create our date picker, we'll need the following prerequisites:

1. Bootstrap 3 (cdn)
   If you aren't using Bootstrap on your site, you can use this isolated version of bootstrap. The date picker will work with Bootstrap 2, but this tutorial sticks with Bootstrap 3.
2. jQuery 1.71+ (cdn)
   This popular JavaScript library is needed by the date picker. You're likely already using it on your site.

After adding Bootstrap-Datepicker and the prerequisites, the header of your webpage should look something like this:

<!--  jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

<!-- Isolated Version of Bootstrap, not needed if your site already uses Bootstrap -->
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />

<!-- Bootstrap Date-Picker Plugin -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>

Step 1: Create a form

First, we need to create a form that includes a date <input>. You can write this by hand using Bootstrap form syntax or you can use our popular Bootstrap form builder. Your form code should look like this:

<div class="bootstrap-iso">
 <div class="container-fluid">
  <div class="row">
   <div class="col-md-6 col-sm-6 col-xs-12">

    <!-- Form code begins -->
    <form method="post">
      <div class="form-group"> <!-- Date input -->
        <label class="control-label" for="date">Date</label>
        <input class="form-control" id="date" name="date" placeholder="MM/DD/YYY" type="text"/>
      </div>
      <div class="form-group"> <!-- Submit button -->
        <button class="btn btn-primary " name="submit" type="submit">Submit</button>
      </div>
     </form>
     <!-- Form code ends --> 

    </div>
  </div>    
 </div>
</div>

The .container-fluid, .row, and .col-md-6 .col-sm-6 .col-xs-12 divs are part of the Bootstrap grid system that will make the form's width responsive to a variety of different devices.

All of the Bootstrap code is wrapped in a .bootstrap-iso div which tells the bootstrap-iso.css file that we want to use Bootstrap styling within the div. If you are already using Bootstrap CSS on your website, you can omit this div.

Notice that I have given the input an id and name of date. This is a unique identifier that we will need to provide to the datepicker plugin.

Step 3: Setup and Initialize Datepicker Plugin

All that is left to do is to write a snippet of JavaScript to tell the datepicker plugin where to find the date input and how to handle it.

First, we use jQuery to wait until the page elements have finished loading. Then, we select the date <input>.

If the user is using our isolated version of Bootstrap, we select the container div `.bootstrap-iso'. This way we can tell the date picker to append the interactive element within the div where Bootstrap CSS is being applied.

There are a number of possible plugin options described in the documentation. For our purposes, we specify the format of the date, define a container element, highlight today's date, and close the interactive popup after a date has been chosen. All that, all that is left is to initialize the plugin.

The complete code we'll use looks like this:

<script>
    $(document).ready(function(){
      var date_input=$('input[name="date"]'); //our date input has the name "date"
      var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
      var options={
        format: 'mm/dd/yyyy',
        container: container,
        todayHighlight: true,
        autoclose: true,
      };
      date_input.datepicker(options);
    })
</script>

If you want test out different plugin options, the plugin offers a useful sandbox. It allows you to test inputs, preview the datepicker, and view example option code.

Bootstrap Form Builder Instructions

The above tutorial can be coded by hand. However, a much easier way to complete the tutorial is to use our Bootstrap Form Builder. If you go this route, simply:

1. Create a new form at https://formden.com/form-builder/
2. Remove all existing fields
3. Create a Single Line Text input with name/id date
4. Click on the Settings Tab and add the following code to the Extra JavaScript/CSS section:

<!-- Include jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

<!-- Include Date Range Picker -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>

<script>
    $(document).ready(function(){
        var date_input=$('input[name="date"]'); //our date input has the name "date"
        var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
        date_input.datepicker({
            format: 'mm/dd/yyyy',
            container: container,
            todayHighlight: true,
            autoclose: true,
        })
    })
</script>

Here is short video tutorial walking you through the process: