jQuery Keithwood calendar plugin

Question

I have to click twice to get the calendar. I am using Keithwood plugin: http://keith-wood.name/calendars.html

My code:

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

This code works, but i have to click the icon twice. Is there a way to preinitialize the calendar or how to make the same work in a single click.

Answer 1

First check the string in the showTrigger option, is not well formed.

You are attaching the calendar on the click of the element itself, so it will work on the second click because the handler is attached to it.

To let it work on the first click you can invoke the show method:

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

Like:

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

Code:

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

    };
}

Docs: http://keith-wood.name/datepickRef.html#

Demo: http://jsfiddle.net/IrvinDominin/UYE55/