Javascript jQuery Keithwood日历插件

我必须点击两次才能得到日历。 我正在使用Keithwood插件：

我的代码：

    <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>

函数setVal（值）{
var finalVal='#startPopup'+值；
var imgN='img_u3;'+值；
document.getElementById（imgN.style.display='none'；
美元（最终）
斯皮克先生(
{
日历：$.calendars.instance（'Gregorian'），
showOnFocus：错误，
showTrigger:“'alt=“Popup”class=“trigger calendercon”>”，
onSelect:updateSelected
});
已选择函数更新（日期）{
var selId=this.id；
var ret=选择分割（“”）；
var str2=ret[1]；
变量a='#开始日期'+str2；
变量b='#开始月数'+str2；
变量c='#开始时间'+str2；
var days=日期[0]。日期（）；
如果（天数<10天）{
天数='0'+天；
}
$（a）.val（天）；
变量月份=日期[0]。月份（）；
如果（月数<10）{
月数='0'+月数；
}
美元（b）.val（月）；
$（c）.val（日期[0].year（））；
$（'endDate_2'）.val(
$（'endyear_2'）.val（）+“/”+$（'endyear_2'）.val（）+“/”
+$（'endday_2'）.val（）；
}
;
}

这段代码有效，但我必须单击图标两次。

---

是否有方法预先初始化日历或如何在一次单击中使相同的工作。

首先检查

showTrigger

选项中的字符串是否格式不正确

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

要让它在第一次单击时工作，您可以调用

show

方法：

$（选择器）.datepick（'show'）jQuery对象弹出 给定的字段

比如：

代码：

$（函数（）{
$（'.trigger calenderIcon calendars trigger'）.calendarsPicker（）；
});
函数setVal（值）{
var finalVal='#startPopup'+值；
var imgN='img_u3;'+值；
document.getElementById（imgN.style.display='none'；
美元（最终）
斯皮克先生({
日历：$.calendars.instance（'Gregorian'），
showOnFocus：错误，
显示触发器：“”，
onSelect:updateSelected
});
$（finalVal.calendarsPicker（'show'））
已选择函数更新（日期）{
var selId=this.id；
var ret=选择分割（“”）；
var str2=ret[1]；
变量a='#开始日期'+str2；
变量b='#开始月数'+str2；
变量c='#开始时间'+str2；
var days=日期[0]。日期（）；
如果（天数<10天）{
天数='0'+天；
}
$（a）.val（天）；
变量月份=日期[0]。月份（）；
如果（月数<10）{
月数='0'+月数；
}
美元（b）.val（月）；
$（c）.val（日期[0].year（））；
$（'endDate_2'）.val(
$（'endyear_2'）.val（）+“/”+$（'endyear_2'）.val（）+“/”+$（'endyear_2'）.val（））；
};
}

文件：

---

演示：

首先检查

showTrigger

选项中的字符串是否格式不正确

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

要让它在第一次单击时工作，您可以调用

show

方法：

$（选择器）.datepick（'show'）jQuery对象弹出 给定的字段

比如：

代码：

$（函数（）{
$（'.trigger calenderIcon calendars trigger'）.calendarsPicker（）；
});
函数setVal（值）{
var finalVal='#startPopup'+值；
var imgN='img_u3;'+值；
document.getElementById（imgN.style.display='none'；
美元（最终）
斯皮克先生({
日历：$.calendars.instance（'Gregorian'），
showOnFocus：错误，
显示触发器：“”，
onSelect:updateSelected
});
$（finalVal.calendarsPicker（'show'））
已选择函数更新（日期）{
var selId=this.id；
var ret=选择分割（“”）；
var str2=ret[1]；
变量a='#开始日期'+str2；
变量b='#开始月数'+str2；
变量c='#开始时间'+str2；
var days=日期[0]。日期（）；
如果（天数<10天）{
天数='0'+天；
}
$（a）.val（天）；
变量月份=日期[0]。月份（）；
如果（月数<10）{
月数='0'+月数；
}
美元（b）.val（月）；
$（c）.val（日期[0].year（））；
$（'endDate_2'）.val(
$（'endyear_2'）.val（）+“/”+$（'endyear_2'）.val（）+“/”+$（'endyear_2'）.val（））；
};
}

文件：

演示：

$(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());

    };
}