jquery Display datepicker when inline editing

I'm doing inline editing on a table and I'开发者_Go百科m having an issuer with one of the cell which has to display datepicker when user clicks inside. when I click in the cell, the editing textbox is displax but when I click in the textbox, the datepicker doesn't appear. Thanks for your help. Cheers

  $('.editable').live({
          hover: function () {
              //alert('Am hovering');
              //change background of an editable element if mouse hover
              $(this).toggleClass('over-inline');
          },
          click: function (e) {
           //start inline editing
              var $editable = $(this);

              if ($editable.hasClass('active-inline')) {
                  return;
              }
              var contents = $.trim($editable.html());
              initialValue = contents;
              var itemID = $editable.attr('id');
              var editID = 0;
              var s = '';
               $editable
                  .addClass('active-inline')
                  .empty();

                  //define the edit element
                  var editElement = '<input type="text" class="showDatePicker" />';
                  displayDatePicker('.showDatePicker');
                  $(editElement)
                    .val(initialValue)
                    .appendTo($editable)
                    .focus();
                  //addEditButtons($editable); function that add save/delete/cancel buttons
        }



      function displayDatePicker(selector) {

          $(selector).datepicker({
              showOn: "both",
              buttonImage: "images/calendar.gif",
              buttonImageOnly: true,
              changeMonth: true,
              changeYear: true
          });
          $(selector).datepicker("option", "dateFormat", 'dd.mm.yy');
      }

Like I said in the comments above, start by changing the order in which you do things:

• Append your newly created textbox;
• Call the function which will add the hasDatepicker class to the element;

Also change your textbox's class so it looks like this:

var editElement = '<input type="text" class="Datepicker" >';

Then you call the function this way:

displayDatePicker('.Datepicker');

Cheers