After Drag and Drop datepicker not showing Calendar

问题

I am working on DnD html5 with jqueryUI. Everything is working perfectly , only one issue . I use a date picker on input text field. like following :

<input type="text"  class="date" name="date" id="date" placeholder="&nbsp;&nbsp;DD-MM-YEAR">

jquery :

$( ".date" ).datepicker();

that is working . But when I drag it (clone) and place it another div then calendar not showing .Please anyone help me .

回答1:

Please Try the following code to clone the datePicker. HTML

 <div id="someDiv">
   <input class="datefield" />
  </div>

SCRIPT

 $(document).ready(function() {
  var mydiv = $('#someDiv');
  mydiv.find('input.datefield').datepicker();
  var newDiv = mydiv.clone(false).attr("id", "someDiv2").insertAfter(mydiv);
  newDiv.find('input.datefield')
    .attr("id", "")
    .removeClass('hasDatepicker')
    .removeData('datepicker')
    .unbind()
    .datepicker();

})

Please kindly update me if it helps you

回答2:

Here is my Jquery full snapshot :

$(document).ready(function() {
        $( ".date" ).datepicker(); //Data Picker
  $('.test').draggable({
    helper: "clone",
    revert: "invalid"

  });
  $('#drop').droppable({
    accept: ".test",
    drop: function(e, u) {
      var a = u.helper.clone();
        count++;

      console.log("INFO: Accepted: ", a.attr("class"));
      a.css("z-index", 1000);
      a.appendTo("#drop");
      a.attr('class', 'dropped').draggable({
        containment: "#drop"

      }).dblclick(function() {
        // Enabled Resize on element when double clicked
          $(this).resizable(); 

          $(this).find("input.date").removeClass('hasDatepicker').removeData('datepicker').unbind().datepicker();
         $(this).find("textarea").replaceWith(function() {
             return '<span>'+$(this).val()+'</span>';
             $(this).find("input[type=text]").attr("name",count);
         });

      });
    }
  });
  $(document).click(function() {
    if ($(".dropped").length) {
      // Disabled Resize on all elements when #drop
      $(".ui-resizable").resizable("destroy");
    }
  });
});
    function formsubmit(){
        alert(document.getElementById('dd').innerHTML);
    }

回答3:

Interesting things happen here that cause problems, but I did find a solution.

Working example: https://jsfiddle.net/Twisty/djecvLdf/3/

HTML Snippet

<div class="elements">
  <div class="new button-wrapper element ui-widget-content ui-corner-all" data-item-type="button">
    <span class="side-handle ui-icon ui-icon-grip-dotted-vertical"></span>
    <button class="" title="">New Button</button>
  </div>
  <div class="new textbox-wrapper element ui-widget-content ui-corner-all" data-item-type="input[type='text']">
    <span class="side-handle ui-icon ui-icon-grip-dotted-vertical"></span>
    <input type="text" class="datepicker" title="" placeholder="New DatePicker" />
  </div>
  <div class="new label-wrapper element ui-widget-content ui-corner-all" data-item-type="label">
    <span class="side-handle ui-icon ui-icon-grip-dotted-vertical"></span>
    <label class="" title="">New Label</label>
  </div>
</div>
<div id="drop"></div>

jQuery Snippet 1

In our .ready() function, we look to see if a datepicker item has been dropped:

  $("#drop").on("drop", function() {
    if ($("#drop input.datepicker").length) {
      $("#drop input.datepicker").datepicker();
    }
  });

jQuery Snippet 2

Inside of the drop function, we would also take this step:

  if (a.find("input.datepicker").length) {
    var datepick = $("#" + a.find("input").attr("id"));
    datepick.datepicker();
  }

This seems to cover all the bases. Please look at the example and implement this into your own code.

回答4:

What I did wrong :

$(document).ready(function() {

  $('.test').draggable({
    helper: "clone",
    revert: "invalid"

  });
        $("#drop").on("drop", function() {
    if ($("#drop input.datepicker").length) {
      $("#drop input.datepicker").datepicker();
    }
  })
  $('#drop').droppable({
    accept: ".test",
    drop: function(e, u) {
      var a = u.helper.clone();
        count++;

      console.log("INFO: Accepted: ", a.attr("class"));
      a.css("z-index", 1000);
      a.appendTo("#drop");
      a.attr('class', 'dropped').draggable({
        containment: "#drop"

      }).dblclick(function() {
        // Enabled Resize on element when double clicked
          $(this).resizable(); 

          $(this).find("input.date").removeClass('hasDatepicker').removeData('datepicker').unbind().datepicker();
         $(this).find("textarea").replaceWith(function() {
             return '<span>'+$(this).val()+'</span>';
             $(this).find("input[type=text]").attr("name",count);
         });

      });
    }
  });
  $(document).click(function() {
    if ($(".dropped").length) {
      // Disabled Resize on all elements when #drop
      $(".ui-resizable").resizable("destroy");
    }
  });
});
    function formsubmit(){
        alert(document.getElementById('dd').innerHTML);
    }

来源：https://stackoverflow.com/questions/38069921/after-drag-and-drop-datepicker-not-showing-calendar