title: Date picker not shown on the first component click
body: <p>I have the following code in my JSP and I bind the variables with knockout js.</p>
  
  <p>My js is </p>
  
  <pre><code> calender: function () {
       console.log("in calender");
       var dates = $("#from1, #to1").datepicker({
       defaultDate: "+1w",
       changeMonth: true,
       numberOfMonths: 1,
       onSelect: function (selectedDate) {
           var option = this.id == "from" ? "minDate" : "maxDate",
               instance = $(this).data("datepicker"),
               date = $.datepicker.parseDate(
               instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
           dates.not(this).datepicker("option", option, date);
       }
   });
   },
  </code></pre>
  
  <p><strong>and the jsp is</strong></p>
  
  <pre><code> &lt;div class="DateRange"&gt;
   &lt;label for="from"&gt;From&lt;/label&gt;
   &lt;input type="text" id="from" name="from" data-bind="click: calender, value:    starDate"/&gt;
   &lt;label for="to"&gt;to&lt;/label&gt;
   &lt;input type="text" id="to" name="to" data-bind="click: calender, value: endDate"/&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>The calender method is getting called when I click on either start or end end date, but the issue is the date picker is not shown for click (just method alone called) on the fisrt component for very first time regardless if its id. from the next click on the second component only the datepicker is coming up fine. Any thing I'm missing here?</p>