title: How to add date-picker to content editable td?
body: <p>Following is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var j = jQuery.noConflict();
  j(".datetimepicker").click(function() {
    j(".datetimepicker").datepicker({
      dateFormat: 'dd-mm-yy',
      onClose: function(dateText, inst) {
        // When the date is selected, copy the value in the content editable div.
        // If you don't need to do anything on the blur or focus event of the content editable div, you don't need to trigger them as I do in the line below.
        $(this).parent().find('.datetimepicker').focus().html(dateText).blur();
      }
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;tr&gt;
    &lt;th&gt;First Date&lt;/th&gt;
    &lt;td class='datetimepicker' contenteditable='true'&gt;"+ paidDate1 + "&lt;/td&gt;
  &lt;/tr&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So when I clicked on that row, the content is editable but the date-picker is not showing up. How can I fix this? </p>