JQuery UI datepicker可以绑定到图标吗？答案

【问题标题】：Can JQuery UI datepicker be bound to an icon?JQuery UI datepicker可以绑定到图标吗？
【发布时间】：2013-04-18 09:43:39
【问题描述】：

我有一些看起来像

的 HTML

<select id="day"><option>Day</option></select>
<select id="month"><option>Month</option></select>
<select id="year"><option>Year</option></select>
<img src="img/some-icon.png" id="datepicker" />

我无法将$("#datepicker").datepicker() 绑定到上面的图标。它只是不会显示日历。

JQuery UI 示例始终将日期选择器绑定到输入字段。我只是想知道是否有其他方法可以实现这一目标？

编辑：我目前正在使用下面许多建议的隐藏字段。只是想知道我是否有办法避免使用隐藏字段

【问题讨论】：

这 3 个选择是否相关？
是的，它们会填充所选日期。 :)
你是怎么做到的？ :)
@Zim84 - 见这里 - jsfiddle.net/gvAbv/13
希望此链接对您有所帮助stackoverflow.com/questions/2198741/…

标签： jquery jquery-ui datepicker jquery-ui-datepicker

【解决方案1】：

您错过了打开" 的id，应该是：

<img src="img/some-icon.png" id="datepicker" />
--------------------------------^here-----------

【讨论】：

感谢编辑。这是问题中的一个错字，但实际的 HTML 是可以的 :)

【解决方案2】：

另一种方法是让控件绑定到输入字段。把它隐藏起来。然后你的图标的onclick，只需调用输入字段的onFocus()。

【讨论】：

谢谢，这正是我目前正在做的。我想确认是否有办法避免使用隐藏字段。

【解决方案3】：

<input type="text" id="datepicker"/>
<img src="img/some-icon.png" id="datepick" />

使用上面的代码显示日历。如果要隐藏文本框，请使用 type="hidden"。

要点击隐藏的文本框，请使用下面的 JS 代码。

$("#datepick").click(function(){
     $("#datepicker").click();
     $("#datepicker").datepicker();
});

【讨论】：

【解决方案4】：

如果有人有兴趣了解我是如何为此创建插件的，请按照下面的代码进行操作。最后我不得不使用隐藏字段，但事实证明这是我能找到成功使用日历的唯一方法。

HTML

<select id="day"><option>Day</option></select>
<select id="month"><option>Month</option></select>
<select id="year"><option>Year</option></select>
<input type="hidden" id="date-selector">

JavaScript

$.fn.showCalendar = function(options){
    var defaults ={
        selector : "#date-selector",
        calendarIcon : "./images/icons/calendar.gif",
        numberOfSelectableDays : "+60D",
        dateFormat: "dd/mm/yy",
        numberOfMonths : 3,
        daySelector : "#day",
        monthSelector : "#month",
        yearSelector : "#year"
    }

    var $this = $(this);
    var params = $.extend({},defaults, options);

    var getDateFromDropDowns = function(){
         var dateOnDropDowns =  new Date($(params.daySelector).val(),$(params.monthSelector).val(),$(params.yearSelector).val());
         return  dateOnDropDowns;
    }


    return $this.each(function(){
        $this.datepicker({
            showOn: "button",
            buttonImage: params.calendarIcon,
            minDate: 0,
            maxDate: params.numberOfSelectableDays,
            dateFormat: params.dateFormat,
            buttonImageOnly: true,
            numberOfMonths: params.numberOfMonths,
            setDate : getDateFromDropDowns,
            onClose: function(dateText, inst) {
                $(params.yearSelector).val(dateText.split('/')[2]);
                $(params.daySelector).val(dateText.split('/')[0]);
                $(params.monthSelector).val(dateText.split('/')[1]);
            }
        });
    });
},

【讨论】：