将jquery datepicker添加到使用document.createElement（）创建的输入文本框中

Posted 2021-05-01

我正在尝试将datepicker添加到使用document.createElement（）创建的新文本框中。

我将datepicker分配给一个名为pickDate的类：

$(function () {

                    $('.pickDate').datepicker({ dateFormat: "dd/mm/yy" });
                });

它适用于页面加载时生成的输入元素。

我用来创建新输入文本框的函数包含以下内容：

function addNew() {...
                    var newDate = document.createElement('input');
                    newDate.type = "input";
                    newDate.id = "date";
                    newDate.className = "pickDate"; .....}

新文本框创建正常但没有日期选择器。从我的在线研究，我认为我必须使用onfocus()并绑定它？注意：在此示例中，我必须使用类而不是id。

不幸的是我对javascript和jquery很新，这是我可以去的。我尝试的任何变化似乎都不起作用。

答案

当你使用

$('.pickDate').datepicker()

它将datepicker分配给每个找到该时间的元素，但不会在将来的每个时间分配。为了向您创建的输入提供此功能，将它们包装在jquery对象中，并在函数中为它们单独分配datepicker

function addNew() {...
  var newDate = document.createElement('input');
  newDate.type = "input";
  newDate.id = "date";
  newDate.className = "pickDate"; 
  $(newDate).datepicker();
.....}

或者更多地利用jquery

var count = 0;
function addNew(){
 var newDate = $('<input type="input" id="date'+(count++)+' "class="pickDate"').datepicker();
}

注意：id应该是唯一的，所以如果你要创建多个（它可能不仅仅是一个int，它只是为了显示这个概念）它应该有某种偏移量。

另一答案

将新表单元素添加到页面时注册它。

$(document.body).append(newDate);   
$(newDate).datepicker({ dateFormat: "dd/mm/yy" });

另一答案

试试这个

JSFIDDLE

function addNew() {
    var newDate = document.createElement('input');
    newDate.type = "input";
    //  newDate.id = "date";
    newDate.className = "pickDate";
    $("body").append(newDate) + "<br>";
    bindDp(newDate);
}

function bindDp(element) {
    $(element).datepicker({
        dateFormat: "dd/mm/yy"
    });
}

另一答案

创建输入nCampo = document.createElement('input');

创建它之后，添加datepicker $(nCampo).datepicker();的功能，它应该工作。

另一答案

请尝试以下代码，它对document.createElement正常工作：

var element7 = document.createElement("input");
element7.type = "date";
element7.id = "datepicker";
element7.size = "10";
element7.name = "datepicker";
element7.setAttribute("onClick", "test('datepicker')");
cell7.appendChild(element7);

在JavaScript中：

Function test (datepicker) {

    $(function() {
        $("#" + datepicker).datepicker();
    });

}