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

喜欢

我使用了 this icon 来自不错的 tango icons 项目，也可在 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
});

Answer 4

最好的办法是；

首先使用你已经使用过的javascript。

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

然后，添加以下css代码；

<style type="text/css">
.ui-datepicker-trigger
{
        padding:0px;
        padding-left:5px;
        vertical-align:baseline;

        position:relative;
        top:4px;
        height:18px;
}
</style>

此 css 将帮助您根据需要正确对齐日历图像。

Answer 5

只是对 Evs 的回答稍作跟进...（帮助很大，谢谢 Evs ！）。

它也适用于 IE8，我添加了 CSS 来更改悬停时的光标：

button.date-picker-button-hidden:hover
{
    cursor: pointer; 
}

Answer 6

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

提供了一个非常好的示例代码。

Answer 7

借用并扩展 Loktar 的答案，你可以尝试这样的事情，注意我只在 FF10 中测试过，但我不明白为什么它在其他浏览器中不起作用。

$('.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'));

注意，在这个例子中，date-picker-button-hidden 和 date-picker-icon 是我自己的类，因为我不喜欢 jQuery 的样式直接使用 CSS 类。应用以下 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;
}

这实际上是在按钮后面放置一个常规的 jQuery span 图标。该按钮是完全透明/不透明的（通过 CSS），但是因为它仍然在图标顶部，所以单击图标会触发按钮单击事件。

Answer 8

我使用这个 jquery 代码来获取一个文本输入字段的日期选择器和一个 jquery UI 图标作为日期选择器按钮上的图像。

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

Answer 9

更改：显示在：“两者”，//按钮

<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/

Answer 10

在手动设置按钮/图标的过程中，您可以使用How to combine the jQueryUI DatePicker's Icon Trigger with Bootstrap 3's Input Groups 中的这个示例让 JS 点击事件将焦点设置在相关日期输入字段上，从而触发 jQueryUI 日期功能出现。

或者，正如documentation 所述，您可以使用show 方法来显示日期选择器（请注意，“如果日期选择器附加到输入，则输入必须可见才能显示日期选择器。 ")。

$( ".selector" ).datepicker( "show" );

这允许您使用输入字段旁边的任何按钮/图像/图标，并能够单击按钮/图像/图标来触发输入字段的日期功能。

Answer 11

我通过将我的图标按钮的 HTML 直接添加到 buttonText 选项并禁用 buttonImage 选项来实现此功能。

$('.datepicker').datepicker({
    showOn: "both",
    buttonText: '<i class="icon-calendar"></i>',
    dateFormat : "DD, MM d"
});