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/