javascript - jQuery Keithwood calendar plugin -


i have click twice calendar. 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 = '#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, have click icon twice. there way preinitialize calendar or how make same work in single click.

first check string in showtrigger option, not formed.

you attaching calendar on click of element itself, work on second click because handler attached it.

to let work on first click can invoke show method:

$(selector).datepick('show') jquery object pop datepicker 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 = '#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/


Comments

Popular posts from this blog

assembly - 8086 TASM: Illegal Indexing Mode -

Java, LWJGL, OpenGL 1.1, decoding BufferedImage to Bytebuffer and binding to OpenGL across classes -

javascript - addthis share facebook and google+ url -