使用JQuery UI Datepicker与来自Jquery UI主题的图标

Question

我有一个使用JQuery UI的datepicker控件设置,我也使用JQuery UI主题,它提供了一堆我想要使用的默认图标.

DatePicker允许指定特定图像,即:

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

要显示图标集中的图标,请使用以下内容:

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

是否有一个易于集成的两个或我只需要手动破解样式/图像？

Answer 1

我通过这样做得到了它

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

只需修改它在日历输入旁边插入的按钮即可.默认情况下,它们在文本中抛出三个椭圆,所以我也删除它.

Answer 2

我建议把图像放入输入

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

喜欢

我在png中提供的漂亮的探戈图标项目中使用了这个图标

好处:

• 独立于javascript
• 立即加载DOM
• 未来日期输入易于添加

Answer 3

我担心你必须手动完成.默认情况下,Datepicker插件使用以下HTML来插入指定的buttonImage:

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

顺便说一下,你可能想用......

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

...代替...

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