拖拽datepicker後不顯示日曆

Question

我正在使用jQueryUI的DnD html5。一切都很完美，只有一個問題。我在輸入文本字段上使用日期選擇器。像下面：

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

的jQuery：

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

正在工作。但是，當我拖動它（克隆），並把它放在另一個div，然後日曆不顯示。請任何人幫助我。

Answer 1

請嘗試以下代碼來克隆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(); 

}) 

如果它可以幫助你

Answer 2

這裏是我的jQuery的全快照敬請更新我：這裏是導致問題

$(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); 
    } 

Answer 3

有趣的事情發生，但我確實找到了解決方案。

工作例如：https://jsfiddle.net/Twisty/djecvLdf/3/

HTML摘錄

<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的片段1

在我們.ready()功能，我們看看，如果一個datepicker項目已被刪除：

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

jQuery的片段2

裏面的drop功能，我們也將採取這一步驟：

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

這似乎涵蓋所有的基礎。請看這個例子，並將其實現到您自己的代碼中。

Answer 4

我做了什麼錯：

$(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); 
    }