title: Attach a Pikaday Datepicker library to a text field on demand and show it all in 1 click?
body: <p>I am working on a Project management application that has a page for editing "Tasks" records.  THis page can how anywhere from 0 to unlimited Task records for editing.</p>
  
  <p>Each Task records HTML is generated and injected into the page DOM using a JAvaScript function.  At the end of this JS function it currently runs some code like this below to attach a Date Picker library to each and every Task Due Date text input field!</p>
  
  <p>Imagine a page with 100 Tasks!  100 Date Pickers being initiated on page load...not so great I would imagine!</p>
  
  <pre><code>var $datepicker = $(task).find(".date_due").pikaday({
      format: 'MM/DD/YYYY',   
  });
  </code></pre>
  
  <p>The library I am using is very well coded and called Pikaday - <a href="https://github.com/dbushell/Pikaday" rel="nofollow">https://github.com/dbushell/Pikaday</a></p>
  
  <p>So to attempt loading this on demand as needed per date filed I have used this code below instead...</p>
  
  <pre><code>$( "body" ).on( "click", ".date_due", function() {
    var $datepicker = $( this ).pikaday({
         format: 'MM/DD/YYYY'    
     });
     $datepicker.show();
  });
  </code></pre>
  
  <p>This almost works as I need it.  It does load on demand now however when a user clicks a text input I need to load it and show hte Date picker all with 1 click!</p>
  
  <p>This requires 1 click to load and another to open it!</p>
  
  <p>You can see I attempted to trigger an open by calling the library function <code>$datepicker.show();</code> but it does not seem to be working.</p>
  
  <p>The docs on <a href="https://github.com/dbushell/Pikaday" rel="nofollow">https://github.com/dbushell/Pikaday</a> say...</p>
  
  <pre><code>picker.show()
  Make the picker visible.
  </code></pre>
  
  <p>In this JSFiddle you can see that it is not making it visible as it still requires 2 clicks to view a a Date pick.  <a href="http://jsfiddle.net/jasondavis/uuu96ckL/14/" rel="nofollow">http://jsfiddle.net/jasondavis/uuu96ckL/14/</a></p>
  
  <p>Any help please?</p>