javascript - 如何对具有相同 ID 的不同元素使用 datetimepicker()

标签 javascript jquery html datetimepicker bootstrap-datetimepicker

在我的代码中,将使用 jQuery 动态生成某个 div 元素。因此,我使用 .html() 获取了该 div 元素的副本并附加了它。现在,在该 div 中,我有一个 date 字段,我必须在其中使用 datetimepicker()。现在我发现 datetimepicker 不适用于具有相同 ID 的不同元素。

这是一个演示片段。

<!--testing-->
        <div id='testdate'>
            <div class='input-group date' id='recoverydate2'>
                <input type='text' class="form-control" placeholder="Select year" id="rcv_date" name="year" value="<?php echo $gde_date;?>" />
                <span class="input-group-addon">
                   <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
            <!-- <div class='input-group date' id='recoverydate2'>
                <input type='text' class="form-control" placeholder="Select year" id="rcv_date" name="year" value="<?php echo $gde_date;?>" />
                <span class="input-group-addon">
                   <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div> -->
        </div>
 <!--testing-->

第二个带注释的 div 元素将动态生成。所以我必须让 datetimepicker() 对它们都适用。

这是 JS

$(#recoverydate2').datetimepicker({
    format: 'DD-MM-YYYY'
});

虽然我已经尝试过让它们都工作,但没有成功。

$('#testdate #recoverydate2:eq(0)').datetimepicker({
    format: 'DD-MM-YYYY'
});
$('#testdate #recoverydate2:eq(1)').datetimepicker({
    format: 'DD-MM-YYYY'
});

最佳答案

具有相同 id 的多个元素不是有效的 HTML。这就是 class 存在的原因!也就是说,您可以使用新 ID 创建 div 的副本。

例如:

$('#testdate').append(
  '<div class="input-group date" id="recoverydate2-generated">' +
  $('#recoverydate2').html() +
  '</div>'
);

希望这会有所帮助!

关于javascript - 如何对具有相同 ID 的不同元素使用 datetimepicker(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46910557/

相关文章:

javascript - 如何使用下拉菜单将 CSS 类保留在菜单项上

javascript - 将 JSON 对象转换为 JS 数组

javascript - JQuery 设置 CSS Transform, Translate 类中的属性

php - 用表格条目加一填充文本框?

javascript - 我应该在多大程度上依赖JS

html - 使用表格和 css 设计网站的问题

javascript - 具有不同模式的对象数组 - JOI

Javascript if语句和&&运算符的区别

javascript - Tablesorter 特定排序与法国数字

jQuery 验证 - 正则表达式