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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了将jquery datepicker添加到使用document.createElement()创建的输入文本框中相关的知识,希望对你有一定的参考价值。

我正在尝试将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();
    });

}

以上是关于将jquery datepicker添加到使用document.createElement()创建的输入文本框中的主要内容,如果未能解决你的问题,请参考以下文章

将 JQuery Datepicker 动态添加到表单元素

将日历 jquery 图像添加到 datepicker

如何使用jquery datepicker将一天添加到日期

如何将自定义类添加到我的 JQuery UI Datepicker

如何在jquery datepicker中向html属性添加角度标签

Zenx Jquery Datepicker 禁用星期日和节假日