title: Jeditable with jQuery UI Datepicker
body: <p>I need to have a click to edit element on a page, that will in turn invoke an instance of the jQuery UI Datepicker. </p>
  
  <p>Currently, I'm using JEditable to provide the in place editing, which is working fine. However, I have a date control input that I would like to have appear as a calendar, which is where the fun starts.</p>
  
  <p>I've found a Comment in the this <a href="http://www.appelsiini.net/2008/2/creating-inline-timepicker-with-javascript" rel="noreferrer">blog</a> by Calle Kabo (the page is a little mashed unfortunately) that details a way to do this:</p>
  
  <pre><code>$.editable.addInputType("datepicker", {
          element:  function(settings, original) {
              var input = $("&lt;input type=\"text\" name=\"value\" /&gt;");
              $(this).append(input);
              return(input);
          },
          plugin:  function(settings, original) {
              var form = this;
              $("input", this).filter(":text").datepicker({
                  onSelect: function(dateText) { $(this).hide(); $(form).trigger("submit"); }
              });
          }
      });
  </code></pre>
  
  <p>However, I can't get the above to work - no errors, but no effect either. I've tried placing it within the jQuery document ready function and also outside of it - no joy.</p>
  
  <p>My UI Datepicker class is date-picker and my Jeditable class is ajaxedit, I'm sure the above inaction is due to the need to reference them somehow in the code, but I don't know how. Also, the Jeditable control is one of many element ids, if that has a bearing.</p>
  
  <p>Any ideas from those more in the know?</p>