0

我有一些看起来像的 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 示例始终将日期选择器绑定到输入字段。我只是想知道是否有其他方法可以实现这一目标？

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

4

4 回答 4

1

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

<img src="img/some-icon.png" id="datepicker" />
--------------------------------^here-----------
于 2013-04-18T09:45:02.940 回答
0

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

于 2013-04-18T09:48:10.483 回答
0 
<input type="text" id="datepicker"/>
<img src="img/some-icon.png" id="datepick" />

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

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

$("#datepick").click(function(){
     $("#datepicker").click();
     $("#datepicker").datepicker();
});
于 2013-04-18T09:49:47.343 回答
0

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

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]);
            }
        });
    });
},
于 2013-04-19T09:55:42.057 回答