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

时间:2012-04-23 12:08:30

标签: javascript html

我必须在每次点击链接时动态添加日历文本框。我测试了一些代码。对于第一个声明它起作用而不是其他声明。  这是我的代码:

<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>    

当表单加载时可以获得日历。点击“添加”后,它只会作为普通文本框而不是日历打开。

1 个答案:

答案 0 :(得分:2)

致电

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

位于addElement函数的底部。

并改变

<input id='txtDatePicker' type='text' name='test1'>

<input id='txtDatePicker' type='text' class='hajanDatePicker' name='test1'>

此外,您的网页上有多个具有相同ID的输入:txtDatePicker。