Datepicker With Bootstrap Icon

This is an update to a previous a post jQuery Datepicker With Bootstrap Icon but instead of the jQuery UI datepicker we will be using a Bootstrap datepicker.

The problem again is we want to be able to click on an icon to trigger the datepicker without having to write any javascript. The idea is the same as in the previous solutionUse the label’s for attribute to trigger the date’s input field.

Here is what we want the control to look like:

bootstrap-datepicker-retina

HTML:

<div class="input-group">
    <label class="input-group-btn" for="date-fld">
        <span class="btn btn-default">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </label>
    <input type="text" class="form-control date-input" id="date-fld" />
</div>

Some things to note:

  1. We are using the Button Addon .input-group-btn instead of the slightly simpler markup for .input-group-addon. This will give the user better UI hints when the cursor is over the icon.
  2. The <button> has been changed to a <span>. Without this change the datepicker is not triggered. You could, instead, use the button and nest a label within the button but this does not render nicely.

For completeness here is the javascript:

$(".date-input").datepicker({
    // options
});

A working example on jsFiddle.

Libraries in this article:
  1. Bootstrap 3.2.0
  2. https://github.com/eternicode/bootstrap-datepicker
Advertisements