拖放datepicker后不显示日历 [英] After Drag and Drop datepicker not showing Calendar

问题描述

我正在使用jqueryUI处理DnD html5。一切都正常工作，只有一个问题。我在输入文本字段上使用日期选择器。如下：

 < input type =textclass =datename =dateid =date placeholder =& nbsp;  DD-MM-YEAR> 
  

jquery：

 code> $（.date）.datepicker（）; 
  

正在工作。但是当我拖动它（克隆）并放置另一个div，然后日历不显示。请任何人帮助我。

解决方案

做错了：

  $（document）.ready（function（）{
 
 $（'测试'）。draggable（{
 helper：clone，
 revert：invalid
 
}）; 
 $（＃drop （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 b $ b遏制：#drop
 
}）dblclick（function（）{
 //启用当双击$ b $时调整元素大小b $（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）{
 //禁用在#drop 
时调整所有元素的大小$（。ui-resizable）。resizable（destroy）; 
} 
}）; 
}）; 
函数formsubmit（）{
 alert（document.getElementById（'dd'）。innerHTML）; 
} 
  

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 .

解决方案

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

这篇关于拖放datepicker后不显示日历的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！