在使用JavaScript函数调用创建动态表的实例中创建datepicker

时间:2014-11-07 10:50:28

标签: javascript html datepicker

我通过使用Java Script调用一个函数创建了一个动态表。我的函数创建了5列,其中3列是文本框。对于第一个文本框,我想创建一个datepicker而不是文本框。可能吗。这是我的功能代码。

function insertRow(X)
    {
        eval(X);

// nodeArray = HarvestEstimate.Blocks;是我从cs文件中通过过程调用获得的值。             nodeArray = HarvestEstimate.Blocks;

       for (var count = 0; count < nodeArray.length; count++)
       {
            var table=document.getElementById("statstable");
            var row = table.insertRow(table.rows.length);

            var text = nodeArray[count]["Block"];
            var value = nodeArray[count]["BlockId"];

            var cell1=row.insertCell(0);
            var t1=document.createElement("Label");
                t1.for = "lblBlockID"+index;
                t1.innerHTML  = text;;
                cell1.appendChild(t1);

            var cell2=row.insertCell(1);
            var t2=document.createElement("Lable");
                t2.for = "lblBlockName"+index;
                t2.innerHTML  = value; // ;
                cell2.appendChild(t2);

//这就是我想要有一个日期选择的地方。截至目前,它是&#34; cell3&#34;

的文本框
            var cell3=row.insertCell(2);
            var t3=document.createElement("input");
                t3.id = "txtEstStartDt"+index;
                cell3.appendChild(t3);


            var cell4=row.insertCell(3);
            var t4=document.createElement("input");
                t4.id = "txtEstTotes"+index;
                cell4.appendChild(t4);

            var cell5=row.insertCell(4);
            var t5=document.createElement("input");
                t5.id = "txtEstPicks"+index;
                cell5.appendChild(t5);

                index++;
        }

    }

2 个答案:

答案 0 :(得分:1)

如果您的浏览器与HTML5兼容,您可以使用

 <input type="date" />

写一下

 t3.type="date";

之前

 cell3.appendChild(t3);

编辑:

使用HTML5:jsfiddle.net/k30w0mhd/1

使用jQuery UI:http://jsfiddle.net/k30w0mhd/2/

答案 1 :(得分:1)

var cell3=row.insertCell(2);
var t3=document.createElement("input");
t3.id = "txtEstStartDt"+index;
t3.className = "datepicker";
cell3.appendChild(t3);
$( ".datepicker" ).datepicker();

您可以尝试上面的jquery代码..

请记住像这样引用jquery库..

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>