Показать jquery datepicker с изображением HTML/CSS

Question

Я видел несколько сообщений о дате, но ни один из этих вопросов не мог дать мне ответ на мой вопрос.

Дело в том, что я использовал функцию Datepicker (виджет) с JQuery, который:

$(function() { 
    $("#datepicker").datepicker({ 
     showOn: "button", 
     buttonImage: "/debasis/hoofdstuk03/img/calendar.png", 
     buttonText: "Open de kalender", 
     buttonImageOnly: true, 
     inline: true, 
     showOtherMonths: true, 
     dayNamesMin: ['Ma', 'Di', 'Wo', 'Do', 'Vr', 'Za','Zo'], 
     monthNames: ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni', 
      'Juli', 'Augustus', 'September', 'Oktober', 'November', 'December'], 

    }); 
    }); 

HTML, который идет с ним:

<input type="hidden" id="datepicker"> 

Как вы можете видеть, у меня есть использовал изображение кнопки, чтобы отобразить изображение и показать календарь при нажатии на изображение. Хотя проблема с этим заключается в том, что я хочу стилизовать свой образ (в настоящее время он большой), и я понятия не имею, так как я достаточно шутил в JQuery, как это сделать правильно. Могу ли я, например, создать образ без css и просто в самой функции? Я прочитал что-то о .hight и .width, но я не знаю, как включить его, чтобы он работал. Я также попытался сделать это с помощью html и установил src и id, чтобы я мог стилизовать его с помощью css/html, а затем я попытался изменить функцию на функцию 'click on' (id). Но это ничего не сделает (функция не работает), это, вероятно, потому, что я просто вставил код в странный/непонятный способ (так как я jquery nooby).

Так может кто-нибудь мне точку в правильном направлении здесь :)

Thx за помощь заранее!

Answer 1

JQuery UI DatePicker виджет поместить изображение, которое вы выбираете сразу после входа, так что вы можете выбрать с помощью CSS, используя adjacent sibling selector (+):

#datepicker + img { 
    width: 16px; 
    height: 16px; 
} 

jsFiddle example

Answer 2

Вы можете настроить изображение с помощью CSS. Целевой элемент с:

#datepicker img { 

    width: 32px; 
    height: 32px; 

} 

JQuery также назначить класс к изображению ui-datepicker-trigger, что вы могли бы использовать для целевого изображения с помощью CSS.