Twitter Bootstrap Icons in JQuery UI DatePicker

Hello, this is actually a very random blog post. I had to face this problem and there was no solution for it on the internets so I had to face re-coding JQuery's DatePicker code myself.

What I wanted to achieve is to add Twitter's Bootstrap icons (or Font Awesome's icons) as a trigger into the DatePicker without providing a link to an image like in this example.

If you don't know what I'm talking about here are pics:
- Before: - After:

As you can notice, I have used Twitter's Bootstrap input-append class to add the icon into the text field.

To achieve this what you need to do is:

1. You need to have your call like this:

2. Open your jquery.js file and around line 7436 (in JQuery UI 1.9.2) you'll find:

Replace that snipped of code with:

NOTE: You can change the class with another icon of your taste. By the way, I'm using Font Awesome's icons.

3. (optional) If you want your icon to be appended into the text field, you need to put your <input> call of datepicker inside a <div class="input-append"> like this:

NOTE: You can, of course, change the div's class into input-prepend.

It's a newbie approach and I hope there is an easier/fancier/better solution to this (and if you have a link for such please post in the comments), but as I couldn't find one I had to improvise.

4 comments:

  1. Isn't it simpler to just specify buttonText:

    ReplyDelete
  2. That (using buttonText) worked for me:

    .ui-datepicker-trigger:before {
    content: '\f073';
    font-family: FontAwesome;
    font-size: 14px;
    }

    I just set buttonText to " ". Tested in IE10 and Chrome.

    ReplyDelete
  3. Your solution is nice, i also recently wrote about it and i try tried to explain it with example. Hope you like it also :)
    https://htmlcssphptutorial.wordpress.com/2015/09/09/jquery-datepicker-with-icon/

    ReplyDelete