Question

我正在尝试将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很新，这是我可以去的。我尝试的任何变化似乎都不起作用。

Answer 1

使用时

$('.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，它只是为了显示概念），它应该有一些偏移量。

Answer 2

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

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

Answer 3

试试这个

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

Answer 4

请尝试使用以下代码，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();
    });

}

Answer 5

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

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

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

5 个答案: