Question

我有一些看起来像

的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示例始终将datepicker绑定到输入字段。我只是想知道有没有另一种方法来实现这一目标？

编辑：我正在使用隐藏字段，如下所示。只是想知道我是否有办法避免使用隐藏字段

Answer 1

您错过了"的{{1}}，应该是：

id

Answer 2

另一种方法是让控件绑定到输入字段。让它隐藏起来。然后是您图标的onclick，只需拨打输入字段的onFocus()即可。

Answer 3

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

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

点击JS代码下面的隐藏文本框。

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

Answer 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]);
            }
        });
    });
},

JQuery UI datepicker可以绑定到一个图标吗？

4 个答案: