javascript - jQuery Keithwood 日历插件

Question

我必须点击两次才能获取日历。我正在使用 Keithwood 插件:http://keith-wood.name/calendars.html

我的代码:

    <div class="control-group date">
         <div class="day">
             <input name="startday_2" placeholder="DD" type="text" id="startday_2" maxlength="2" readonly="readonly" />
   </div>
   <div class="month">
       <input name="startmonth_2" placeholder="MM" type="text" id="startmonth_2" maxlength="2" readonly="readonly" />
   </div>
   <div class="year">
      <input name="startyear_2" placeholder="YYYY" type="text"                    id="startyear_2" maxlength="4" readonly="readonly" />
   </div>
   <input type="hidden" id="startDate_2" class="calPicker" />
   <div class="date-tool" id="greStartId_2">
    <a href="javascript:void(0)" id="startPopup_2"> <span id="img_2"><img                 onclick="javascript:setVal(2)" src="/OnlineAppointmentSystemBase-portlet/img/date-icon.jpg" alt="Popup" class="trigger calenderIcon calendars-trigger"></span>
    </a>
   </div>
   </div>
<script type="text/javascript">
function setVal(values) {
              var finalVal = '#startPopup_' + values;
              var imgN = 'img_' + values;
              document.getElementById(imgN).style.display = 'none';
              $(finalVal)
                           .calendarsPicker(
                                         {
                                                calendar : $.calendars.instance('Gregorian'),
                                                showOnFocus : false,
                                                showTrigger : '<img src="<c:url value="/img/date-icon.jpg"/>" alt="Popup" class="trigger calenderIcon">',
                                                onSelect : updateSelected
                                         });

              function updateSelected(dates) {
                     var selId = this.id;
                     var ret = selId.split("_");
                     var str2 = ret[1];
                     var a = '#startday_' + str2;
                     var b = '#startmonth_' + str2;
                     var c = '#startyear_' + str2;
                     var days = dates[0].day();
                     if (days < 10) {
                           days = '0' + days;
                     }
                     $(a).val(days);

                     var months = dates[0].month();
                     if (months < 10) {
                           months = '0' + months;
                     }
                     $(b).val(months);

                     $(c).val(dates[0].year());
                     $('#endDate_2').val(
                                  $('#endyear_2').val() + "/" + $('#endmonth_2').val() + "/"
                                                + $('#endday_2').val());

              }
              ;
       }
</script>

此代码有效，但我必须单击该图标两次。有没有办法预初始化日历或如何通过单击完成相同的工作。

Answer 1

首先检查showTrigger选项中的字符串，格式不正确。

您将日历附加到元素本身的单击上，因此它将在第二次单击时起作用，因为处理程序已附加到它。

要让它在第一次点击时起作用，您可以调用 show 方法:

$(selector).datepick('show') jQuery object Pop up the datepicker for the given field.

喜欢:

$(finalVal).calendarsPicker('show');

代码:

$(function () {
    $('.trigger calenderIcon calendars-trigger').calendarsPicker();
});

function setVal(values) {
    var finalVal = '#startPopup_' + values;
    var imgN = 'img_' + values;
    document.getElementById(imgN).style.display = 'none';
    $(finalVal)
        .calendarsPicker({
        calendar: $.calendars.instance('Gregorian'),
        showOnFocus: false,
        showTrigger: '<img src="" alt="Popup" class="trigger calenderIcon">',
        onSelect: updateSelected
    });

    $(finalVal).calendarsPicker('show')

    function updateSelected(dates) {
        var selId = this.id;
        var ret = selId.split("_");
        var str2 = ret[1];
        var a = '#startday_' + str2;
        var b = '#startmonth_' + str2;
        var c = '#startyear_' + str2;
        var days = dates[0].day();
        if (days < 10) {
            days = '0' + days;
        }
        $(a).val(days);

        var months = dates[0].month();
        if (months < 10) {
            months = '0' + months;
        }
        $(b).val(months);

        $(c).val(dates[0].year());
        $('#endDate_2').val(
        $('#endyear_2').val() + "/" + $('#endmonth_2').val() + "/" + $('#endday_2').val());

    };
}

文档:http://keith-wood.name/datepickRef.html#

演示:http://jsfiddle.net/IrvinDominin/UYE55/