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

Posted 2023-02-22

【中文标题】将 JQuery UI Datepicker 与来自 Jquery UI 主题的图标一起使用

【英文标题】：Use JQuery UI Datepicker with Icons from Jquery UI Theme

【发布时间】：2010-10-22 14:09:01

【问题描述】：

我有一个使用 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>

是否可以轻松地将两者集成，还是我只需要手动修改样式/图像？

【问题讨论】：

我也想要这个；我提交了一张票dev.jqueryui.com/ticket/5081

我的票被标记为 Wont-Fix 并带有一条评论，表明将来可能会完全放弃对按钮的支持...我猜你是靠自己的：/

您也可以尝试通过以下代码连接datepicker：***.com/questions/5082204/…

【参考方案1】：

我这样做了

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

只需修改它在日历输入旁边插入的按钮。默认情况下，它们会在文本中抛出三个省略号，因此我也将其删除。

【讨论】：

这个答案实际上使用了jQuery图标

如果你想让图标居中在按钮使用 .button( icons: primary: 'ui-icon-calendar' , text: false )

此解决方案仍然有效。有点违反直觉：必须删除 datepicker 选项“buttonImageOnly: true”才能使这个技巧起作用。

有趣的是，这些年来这仍然有效/可行。我在 SO 上给出的第三个答案。

这很棒。对于新版本的 JQUI，它应该只是图标：“ui-icon-calendar”。在日期选择器上设置 buttonText: "" 也是个好主意，否则标题中会出现 "..."，然后在大多数浏览器中显示为提示。

【参考方案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 加载 未来日期输入易于添加

【讨论】：

正如@Nipup 指出的那样，jQuery 就是这样做的jqueryui.com/demos/datepicker/#icon-trigger

【参考方案3】：

恐怕您必须手动执行此操作。默认情况下，Datepicker 插件使用以下 html 插入指定的buttonImage：

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

顺便说一句，您可能想使用...

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

...而不是...

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

【讨论】：

为什么要使用 "$(function() " 而不是 "$(document).ready(function() "？

1) 因为它更短。 2）因为它更容易记住。 3) 因为它做的事情完全相同，因为它是$(document).ready(function() ... 的别名。

假设您不是在旧版本中工作，“$(function())” 并非在所有版本中都可用;)

见jqueryui.com/demos/datepicker/#icon-trigger @Nipun 建议。您无需手动操作。

@RickAndMSFT 请注意，此答案在撰写本文时是正确的（早在 2009 年）。从那以后情况发生了变化。

【参考方案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 将帮助您根据需要正确对齐日历图像。

【讨论】：

再次，这不是按要求使用 jquery 图标集

【参考方案5】：

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

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

button.date-picker-button-hidden:hover

    cursor: pointer; 

【参考方案6】：

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

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

【讨论】：

此示例使用允许您指定特定图像的 datepicker 属性。提出的问题是如何改用 jquery 图标集。

【参考方案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），但是因为它仍然在图标顶部，所以单击图标会触发按钮单击事件。

【讨论】：

我尝试了这个，因为 Loktar 的回答将图标对齐到按钮的左侧。但我发现跨度上的 position:relative 使它完全消失在屏幕外。也许它依赖于一些祖先元素的定位...无论如何我回到 Loktar 的解决方案并添加 text: false 到按钮，现在图标居中并且按钮使用 jQuery-UI 主题，所以我不确定这个解决方案会带来什么。

【参考方案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 );

【参考方案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/

【参考方案10】：

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

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

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

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

【参考方案11】：

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

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