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?

I'd like this, too; I submitted a ticket dev.jqueryui.com/ticket/5081 — Michael Haren
– Michael Haren, Commented Jan 20, 2010 at 17:45
My ticket was marked Wont-Fix with a comment indicating the the buttn support may be dropped entirely in the future... I guess you're on your own :/ — Michael Haren
– Michael Haren, Commented Jan 23, 2010 at 3:11
You can also try to connect datepicker by following code: stackoverflow.com/questions/5082204/… — jdecode
– jdecode, Commented Oct 15, 2012 at 10:33

Azghanvi · Accepted Answer · 2015-03-11 15:58:34Z

30

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.

edited Mar 11, 2015 at 15:58

Azghanvi

96411 silver badges24 bronze badges

answered Oct 6, 2010 at 14:24

Loktar

35.3k7 gold badges96 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Colin Over a year ago

This answer actually uses the jQuery icons

Colin Over a year ago

And if you want the icon centred in the button use .button({ icons: { primary: 'ui-icon-calendar' }, text: false })

Bampfer Over a year ago

This solution still works. Slightly counter-intuitive: the datepicker option "buttonImageOnly: true" must be removed for this trick to work.

Loktar Over a year ago

Its funny that this is still working/viable after all these years. My third answer ever given on SO.

xtempore Over a year ago

This is great. With new version of JQUI it should be just icon: "ui-icon-calendar". Also good idea to set buttonText: "" on the datepicker otherwise you get "..." in the title which then shows as a hint in most browsers.

Pierre de LESPINAY · Accepted Answer · 2013-05-18 10:12:12Z

27

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

date_picker_example

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

edited May 18, 2013 at 10:12

answered Jan 5, 2011 at 9:48

Pierre de LESPINAY

46.4k62 gold badges222 silver badges318 bronze badges

1 Comment

RickAndMSFT Over a year ago

As @Nipup points out this is how jQuery does it jqueryui.com/demos/datepicker/#icon-trigger

Mathias Bynens · Accepted Answer · 2009-04-29 13:55:03Z

14

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
});

answered Apr 29, 2009 at 13:55

Mathias Bynens

151k54 gold badges224 silver badges254 bronze badges

7 Comments

Thierry Roy Over a year ago

Why would use use "$(function() {" instead of "$(document).ready(function() { "?

Mathias Bynens Over a year ago

1) Because it's shorter. 2) Because it's easier to remember. 3) Because it does exactly the same thing, since it's an alias for $(document).ready(function() { ... }.

jamiebarrow Over a year ago

Assuming you're not working in an old version, "$(function(){})" isn't available in all versions ;)

RickAndMSFT Over a year ago

See jqueryui.com/demos/datepicker/#icon-trigger as @Nipun suggests. You don't need to do it manually.

Mathias Bynens Over a year ago

@RickAndMSFT Note that this answer was correct at the time of writing (back in 2009). Things have changed since then.

|

Muhammed Masood Alingaparambil · Accepted Answer · 2012-08-15 03:58:27Z

3

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.

answered Aug 15, 2012 at 3:58

Muhammed Masood Alingaparambil

391 bronze badge

1 Comment

Colin Over a year ago

Again this isn't using the jquery icon set as requested

telb · Accepted Answer · 2012-06-07 21:00:23Z

1

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; 
}

answered Jun 7, 2012 at 21:00

telb

762 bronze badges

Comments

Nipun · Accepted Answer · 2011-02-24 14:52:30Z

0

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

A very good example with the sample code is provided.

answered Feb 24, 2011 at 14:52

Nipun

1,4854 gold badges20 silver badges28 bronze badges

1 Comment

Colin Over a year ago

This example uses the datepicker property that lets you specify a specific image. The question asked is how to use the jquery icon set instead.

evan w · Accepted Answer · 2012-03-01 06:04:58Z

0

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.

answered Mar 1, 2012 at 6:04

evan w

5527 silver badges15 bronze badges

1 Comment

Colin Over a year ago

I tried this because Loktar's answer aligns the icon to the left of the button. But I found that the position:relative on the span made it disappear off-screen altogether. Perhaps it is reliant on positioning of some ancestor element...Anyway I went back to Loktar's solution and added text: false to the button, and now the icon is centred and the button is using the jQuery-UI theme, so I'm not sure what this solution brings to the table.

Webking · Accepted Answer · 2013-08-23 12:27:04Z

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 });

Wilzon · Accepted Answer · 2014-06-09 23:18:26Z

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/

Community · Accepted Answer · 2017-05-23 11:46:39Z

0

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.

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Mar 4, 2016 at 2:36

pnairn

2,0974 gold badges19 silver badges26 bronze badges

Comments

Marc · Accepted Answer · 2018-12-19 21:50:03Z

0

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"
});

answered Dec 19, 2018 at 21:50

Marc

4,9015 gold badges43 silver badges66 bronze badges

Collectives™ on Stack Overflow

Use JQuery UI Datepicker with Icons from Jquery UI Theme

11 Answers 11

5 Comments

1 Comment

7 Comments

1 Comment

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

5 Comments

1 Comment

7 Comments

1 Comment

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related