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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10280238/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 09:18:09  来源:igfitidea点击:

How to add calendar text box dynamically using javascript?

javascripthtml

提问by Raj

I have to add a calendar text box dynamically on each click on a link. I have tested some codes. For the first declaration it works and not for the others. Here's my code:

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

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

When the form loads can get the calender. After clicking "Add" it just opens as a normal text box and not as calendar.

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

回答by Jakub Konecki

Just call

打电话就行

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

at the bottom of addElementfunction.

addElement函数的底部。

And change

并改变

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

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

to

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

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

Also, you have multiple inputs on your page with the same id: txtDatePicker.

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