Question

104

Use JQuery UI Datepicker with Icons from Jquery UI Theme

rated 0 times [ 105] [ 1] / answers: 1 / hits: 98272 / 15 Years ago, wed, april 29, 2009, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jimmieo

Add To Favorites

Follow

Total Points: 515

Total Questions: 102

Total Answers: 110

Location: Kazakhstan

Member since Mon, Sep 26, 2022

2 Years ago

jimmieo questions

1 Chrome Dev Tools Elements Tab stopped working (can't right click any DOM Node and hover over Dom Node doesnt highlight anything)

Fri, Mar 4, 22, 00:00, 2 Years ago

1 React Redux toolkit: type is not assignable to type 'CaseReducer< type, { payload: any; type: string; }>

Fri, Aug 13, 21, 00:00, 3 Years ago

1 react-query getting old data

Tue, Feb 23, 21, 00:00, 3 Years ago

1 FirebaseError: Function Query.where() requires a valid third argument, but it was undefined

Mon, Mar 11, 19, 00:00, 5 Years ago

1 How to make < tr> clickable as a link instead of cell?

Thu, Jan 31, 19, 00:00, 5 Years ago

View All

answered 15 Years ago nia · Accepted Answer

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

});