JavaScript/jQuery 日期时间选择器：动态添加的输入不显示火日期时间选择器。

发布于 2024-11-30 10:44:20 字数 1457 浏览 3 评论 0原文

我试图找出为什么我的动态添加的输入块（在表格的单元格内）不会触发日期时间选择器。我提供了演示此问题的概念验证代码块。如果您按原样运行此代码，则默认输入标记（id：dti1）可以完美运行，并且会弹出日期时间选择器并允许用户选择日期和时间。但是，当您单击“添加另一个”时，日期时间选择器不会在新的输入元素上弹出，即使它正确显示并与与其正确关联的 dtpick 类也是如此。我的假设是日期时间选择器与页面加载时的每个 dtpick 类元素相关联，因此这就是日期时间选择器不起作用的原因。当我动态添加行时，有什么方法可以强制发生这种情况吗？

<html>
<head>
<!-- includes: jquery, jquery_ui_datepicker, timepicker-- references removed here-->
<script>
  $(document).ready(function(){
   $('.dtpick').datetime({
     userLang   : 'en',
     americanMode: true});
   });
   function addItem() 
   {
    var t = document.getElementById('myTable');
        var row = t.insertRow(-1);
        var c1 = row.insertCell(0);

        var c1content=document.createElement("input");
        c1content.setAttribute("type","text");
        c1content.setAttribute("name","dtnew");
        c1content.setAttribute("id","dtinew");  
        c1content.setAttribute("class","dtpick");
        c1content.setAttribute("value","2011-08-20 01:00:00");

        c1.appendChild(c1content);  
   }
</script>
</head>
<body>
<table id="myTable">
<tr>
  <td><b>Row Header:</b></td>
</tr>
<tr>
  <td><input type="text" name="dt1" id="dti1" class="dtpick" value="2011-08-21 01:00:00"></td>
</table><br>
<a onclick="addItem()"> Add another</a> 
</body>
</html>

非常感谢任何帮助！

大卫

原文

I am trying to figure out why my dynamically added input block (within the cell of a table) does not fire the datetime picker. I've provided a proof of concept block of code that demonstrates this issue. If you run this code as is, the default input tag (id: dti1) works perfectly and the datetime picker pops up and allows the user to select a date and time. However, when you click "Add Another", the datetime picker does not pop up on the new input element, even though it shows up properly with the dtpick class properly associated with it. My assumption is that the datetime picker is associated with each dtpick class element on page load, so that's why the datetime picker isn't working. Is there any way to force that to happen when I dynamically add the row?

<html>
<head>
<!-- includes: jquery, jquery_ui_datepicker, timepicker-- references removed here-->
<script>
  $(document).ready(function(){
   $('.dtpick').datetime({
     userLang   : 'en',
     americanMode: true});
   });
   function addItem() 
   {
    var t = document.getElementById('myTable');
        var row = t.insertRow(-1);
        var c1 = row.insertCell(0);

        var c1content=document.createElement("input");
        c1content.setAttribute("type","text");
        c1content.setAttribute("name","dtnew");
        c1content.setAttribute("id","dtinew");  
        c1content.setAttribute("class","dtpick");
        c1content.setAttribute("value","2011-08-20 01:00:00");

        c1.appendChild(c1content);  
   }
</script>
</head>
<body>
<table id="myTable">
<tr>
  <td><b>Row Header:</b></td>
</tr>
<tr>
  <td><input type="text" name="dt1" id="dti1" class="dtpick" value="2011-08-21 01:00:00"></td>
</table><br>
<a onclick="addItem()"> Add another</a> 
</body>
</html>

Any assistance is greatly appreciated!

David

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

迟月 2024-12-07 10:44:20

添加项目后，您需要重新初始化日期选择器小部件。换句话说，它应该看起来像这样：

function addItem() 
{
    var t = document.getElementById('myTable');
    var row = t.insertRow(-1);
    var c1 = row.insertCell(0);

    var c1content=document.createElement("input");
    c1content.setAttribute("type","text");
    c1content.setAttribute("name","dtnew");
    c1content.setAttribute("id","dtinew");  
    c1content.setAttribute("class","dtpick");
    c1content.setAttribute("value","2011-08-20 01:00:00");

    c1.appendChild(c1content);

    $('.dtpick').datetime({
        userLang: 'en',
        americanMode: true});
    });
}

After you've appended an item, you need to re-initialize your date picker widget. In other words, it should look like this:

function addItem() 
{
    var t = document.getElementById('myTable');
    var row = t.insertRow(-1);
    var c1 = row.insertCell(0);

    var c1content=document.createElement("input");
    c1content.setAttribute("type","text");
    c1content.setAttribute("name","dtnew");
    c1content.setAttribute("id","dtinew");  
    c1content.setAttribute("class","dtpick");
    c1content.setAttribute("value","2011-08-20 01:00:00");

    c1.appendChild(c1content);

    $('.dtpick').datetime({
        userLang: 'en',
        americanMode: true});
    });
}

回复收藏 0 原文

~没有更多了~