javascript - 使用 HTML/CSS 图像显示 jquery datepicker

Question

我看过一些关于日期选择器的帖子，但这些问题都不能给我答案。

交易是我使用了 jquery 的 datepicker 函数(小部件)，它是:

$(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 的情况下只在函数本身中设置图像样式吗？我已经阅读了一些关于 .height 和 .width 的内容，但我不知道如何包含它以便它起作用。我还尝试使用 html 并设置 src 和 id，以便我可以使用 css/html 设置样式，然后我尝试将功能更改为“点击”功能(id)。但这不会做任何事情(函数没有工作)，这可能是因为我只是以一种奇怪的/不可能的方式插入了代码(因为我是一个 jquery nooby)。

所以任何人都可以在这里指出我正确的方向:)

提前感谢您的帮助!

Answer 1

jQuery UI 日期选择器小部件会将您选择的图像直接放在输入后，因此您可以使用 adjacent sibling selector 通过 CSS 选择(+):

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

jsFiddle example