jQuery Datepicker With Bootstrap Icon

Update (2014-08-16):
Not using jQuery UI datepicker? See Datepicker With Bootstrap Icon with eternicode’s Bootstrap-datepicker and Bootstrap 3.

The Problem

I recently needed to use the jQuery UI Datepicker but I also wanted to use Bootstrap’s calendar icon. Simple enough, I thought, the datepicker allows me to specify an icon image. Unfortunately, the built-in datepicker option inserts an img tag and it’s not so easy to add a CSS class needed to use a sprite instead.

Here’s what I’m looking to get:

datepicker_control

TLDNR — Just show me the solution!

First Attempt

HTML:

<label>Date</label>
<input class="date-picker" type="text" />

Wire it up in javascript:

$(".date-picker").datepicker({
    showOn: "both",
    buttonImage: "calendar-icon.jpg"
});

Generated HTML:

<img class="ui-datepicker-trigger" title="..." alt="..." src="calendar-icon.jpg" />

So I have a datepicker with an image button but it’s not the Bootstrap icon. I could just modify the ui-datepicker-trigger CSS to use the Bootstrap sprite that I really want but that’s just way too much work and customization I wanted to do. I need datepicker to work with a sprite.

Second Attempt

Let’s get that Bootstrap icon in there with a some appended awesomeness…

<label>Date</label>
    <div class="input-append"><input class="date-picker" type="text" />
    <div class="add-on datepicker-trigger"><i class="icon-calendar"></i></div>
</div>

Now I have the control looking like how I want. Next I need to wire it up so the icon responds to a click. I’ve added datepicker-trigger to give me something to hook into.

$(".date-picker").datepicker();
$(".datepicker-trigger").on("click", function() {
    $(".date-picker").datepicker("show");
});

Great, it works! But there’s a subtle problem with this method. If I have more than one datepicker, I’ll need to give each control an id and wire each click handler up separately. Otherwise, clicking on one input causes all the date inputs to simultaneously display their datepickers. I guess I could add a data-id attribute to each icon and modify the selectors to filter on that but I have a feeling there is a better way.

A Better Way

Use the for attribute on the label tag and wrap the icon with that label.

HTML:

<label>Date</label>
<div class="input-append">
    <input class="date-picker" id="foo" type="text" />
    <label for="foo" class="add-on"><i class="icon-calendar"></i></label>
</div>

The javascript is reduced to a single line of code.

$(".date-picker").datepicker();
  1. Now I can do the javascript datepicker initialization once and it will pick up date-picker anywhere in my site.
  2. I don’t need to write click handlers to find the specific date input.
  3. I can specify a custom sprite if I decide to change out the Bootstrap icon.

See it in action

Update (2014-06-12):
Bootstrap 3.1.1 example

Update (2014-08-16):
Not using jQuery UI datepicker? See Datepicker With Bootstrap Icon.

Advertisements

10 Replies to “jQuery Datepicker With Bootstrap Icon”

Comments are closed.