如何使用javascript动态添加日历文本框？

我必须在每次点击链接时动态添加日历文本框。我测试了一些代码。对于第一个声明它的作品，而不是其他人。这里是我的代码：如何使用javascript动态添加日历文本框？

<head> 
    <script type="text/javascript"> 
     $(function() { 
      $(".hajanDatePicker").datepicker(); 
     }); 
    </script> 
    <script type="text/javascript"> 
     var intTextBox=0; 

     function addElement(){ 
      var contentID = document.getElementById('content'); 
      var newTBDiv = document.createElement('div'); 
      newTBDiv.setAttribute('id','txtDatePicker'); 
      newTBDiv.innerHTML +="Date:<input id='txtDatePicker' type='text' name='test1'>"; 
      contentID.appendChild(newTBDiv); 
     } 
    </script> 
</head> 
<body> 
    <form id="form1" method="get"> 
     <div id="content"> 
      <input type="text" id="txtDatePicker" name="test1"/> 
     </div> 
     <p><a href="javascript:addElement();" >Add</a> 
    </form> 
</body>

当表单加载可以得到日历。点击“添加”后，它只是以普通文本框的形式打开，而不是作为日历打开。

来源

2012-04-23 Raj

您不应该添加具有相同ID的元素。您可以改为将其改为类名，然后使用您当前拥有的内容（只要您将其放入'hajanDatePicker'类），并添加Jakub的答案。 – jprofitt 2012-04-23 12:13:16

只需拨打

$(".hajanDatePicker").datepicker();

在addElement功能的底部。

，并更改<input id='txtDatePicker' type='text' name='test1'>到<input id='txtDatePicker' type='text' class='hajanDatePicker' name='test1'>

而且，你有你的网页具有相同ID的多个输入：txtDatePicker。

来源

2012-04-23 12:12:06

谢谢。只是我已经添加了这个功能的结束。日历来了，但我不能在文本框中的日期.... – Raj 2012-04-23 12:38:23

哦是的，它是伟大的，如果它是单身。我有很多输入字段，如名称，电话，服务...我有相同的ID在页面上的多个输入：txtDatePicker – Raj 2012-04-23 13:36:03

是的，Jakub。你在正确的轨道上。谢谢 – Raj 2012-04-28 10:42:00

如何使用javascript动态添加日历文本框？

回答

相关问题