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方法：

$（选择）.datepick（“秀”）jQuery对象弹出日期选择为 给定的字段。

像：

$(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/