Use JQuery UI Datepicker with Icons from Jquery UI Theme

Question

I have a datepicker control setup using the JQuery UI, I am also using the JQuery UI themes which provide a bunch of default icons that I want to use.

The DatePicker allows for specifying a specific image, i.e.:

<script type="text/javascript">
  $(document).ready(function() {
    $("#DateFrom").datepicker({ showOn: 'button', buttonImageOnly: true, buttonImage: 'images/ui-icon-calendar.png' });
  });
</script>  

To display an icon from the icon set you use something like:

<span class="ui-icon ui-icon-calendar"></span>

Is there an easy to integrate the two or do I just need to hack out the styles/images manually?

Answer 1

I'm afraid you'll have to do that manually. By default, the Datepicker plugin uses the following HTML to insert the specified buttonImage:

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

By the way, you might want to use...

$(function() {
 // your code here
});

...instead of...

$(document).ready(function() {
 // your code here
});

Answer 2

I got it working by doing this

$("#DateFrom").datepicker({
    showOn: 'button'
}).next('button').button({
    icons: {
        primary: 'ui-icon-calendar'
    }, text:false
});

Just modifies the button that it inserts next to your input for the calendar. By default they throw three ellipses in the text, so I remove that as well.

Answer 3

I suggest putting the image into the input

input.date_picker {
  text-align: center;
  background-image: url("images/ui-icon-calendar.png");
  background-position: right center;
  background-repeat: no-repeat;
  padding-right: 18px;
  width: 78px;
}

Like

I used this icon from the nice tango icons project also available in png

Advantages:

• Independent from javascript
• Loads instantly with the DOM
• Future date inputs easy to add

Answer 4

The best way would be to;

First use the javascript as you have already used.

 <script type="text/javascript">
   $(document).ready(function() {
        $("#DateFrom").datepicker({ showOn: 'button', buttonImageOnly: true, buttonImage: 'images/ui-icon-calendar.png' });
   });
 </script>

Then, add the following css code;

<style type="text/css">
.ui-datepicker-trigger
{
        padding:0px;
        padding-left:5px;
        vertical-align:baseline;

        position:relative;
        top:4px;
        height:18px;
}
</style>

This css will help you to align the calendar image correctly as you require.

Answer 5

Just a minor follow on to Evs' answer... (great help and thank you Evs !).

It works in IE8 too, and I added CSS to change the cursor on hover:

button.date-picker-button-hidden:hover
{
    cursor: pointer; 
}

Answer 6

http://jqueryui.com/demos/datepicker/#icon-trigger

A very good example with the sample code is provided.

Answer 7

Borrowing from and extending Loktar's answer, you could try something like this, note I have only tested this in FF10, but I can't see why it wouldn't work in other browsers.

$('.date-picker').datepicker({showOn: 'button'})
    .next('button').addClass('date-picker-button-hidden')
    .after($('<span/>')
        .addClass('ui-icon').addClass('ui-icon-calendar').addClass('date-picker-icon'));

Note that in this example, date-picker-button-hidden and date-picker-icon are my own classes, since I don't like styling the jQuery CSS classes directly. Apply the following CSS:

span.date-picker-icon
{
    display: inline-block;
    z-index: -1;
    position: relative;
    left: -16px;
}

button.date-picker-button-hidden
{
    opacity: 0.0;
    filter: alpha(opacity=0);
    height: 16px;
    width: 16px;
    margin: 0;
    padding: 0;
}

This is effectively placing a regular jQuery span icon behind the button. The button is completely see-through / opaque (via the CSS), however because it is still on top of the icon, clicking the icon triggers the button click event.

Answer 8

I used this jquery code to get a datepicker for a textinput field and a jquery UI icon to work as a image on the datepicker button.

// Apply jQuery UI DatePicker to all controls with class = datepicker
    $('.datepicker').datepicker({
        showWeek: true,
        dateFormat: "yy-mm-dd",
        buttonImage: "ui-icon-calendar",
        regional: "sv",
        minDate: "-10Y",
        maxDate: "+10Y",
        showButtonPanel: true,
        buttonImageOnly: false,
        showWeekNumber: true,
        firstDay: 1,
        showOtherMonths: true,
        selectOtherMonths: true,
        changeMonth: true,
        changeYear: true,
        showOn: "both"

    }).next('button').text('Show calendar').button({ icons: { primary: 'ui-icon-calendar' }, text: false });

Answer 9

change: to showOn: "both",//button

<input type="text" name="date_from" id="date_from" />        
<input type="text" name="date_to" id="date_to" />

$(function() {
$("#date_from").datepicker({
    changeMonth: true,
    changeYear: true,
    numberOfMonths: 1,
    showOn: "both",//button
    buttonImageOnly: false,
    showAnim: "slideDown",
    dateFormat: "yy-mm-dd",
    onClose: function(selectedDate) {
        $("#date_to").datepicker("option", "minDate", selectedDate);
    }
});
$("#date_to").datepicker({
    changeMonth: true,
    changeYear: true,
    numberOfMonths: 1,
    showOn: "both",//button
    buttonImageOnly: false,
    showAnim: "slideDown",
    dateFormat: "yy-mm-dd",
    onClose: function(selectedDate) {
        $("#date_from").datepicker("option", "maxDate", selectedDate);
    }
});
});

http://jsfiddle.net/wimarbueno/fpT6q/

Answer 10

In going the route of manually setting up a button/icon, you could use this example from How to combine the jQueryUI DatePicker's Icon Trigger with Bootstrap 3's Input Groups to have a JS click event set the focus on the relevant date input field, thereby triggering the jQueryUI date functionality to appear.

Or, as the documentation states, you can use the show method to display the date picker (note that "If the datepicker is attached to an input, the input must be visible for the datepicker to be shown.").

$( ".selector" ).datepicker( "show" );

This allows you to use whatever button/image/icon next to an input field, and be able to click on the button/image/icon to trigger the date functionality for the input field.

Answer 11

I got this to work by adding the HTML for my icon button directly into the buttonText option and disabling the buttonImage option.

$('.datepicker').datepicker({
    showOn: "both",
    buttonText: '<i class="icon-calendar"></i>',
    dateFormat : "DD, MM d"
});