如何使用相同的 id 动态创建 datetimepicker？不工作

Posted 2023-04-12

【中文标题】如何使用相同的 id 动态创建 datetimepicker？不工作

【英文标题】：How to create datetimepicker dynamically with same id? not working

【发布时间】：2020-01-08 02:31:16

【问题描述】：

我很难弄清楚如何动态创建 datetimepicker。 我正在使用下面的代码在数据表中的单元格上动态创建 datetimepicker。当我单击一个单元格时，会在其上动态创建 datetimepicker。然后我单击其他单元格，datetimepicker 消失并在单击的单元格上创建另一个。

我正在尝试的方式是，当事件发生时，我使用带有 id 的 append 函数。请参阅下面的示例代码。

<div id='textId'></div>


//when eventA occurs,

    $('#testId').empty();
    $('#testId').append('2019-09-01');

//when eventB occurs,

    $('#testId').empty();
    $('#testId').append(<input type="text" class="form-control"/>'
                +'<span class="input-group-addon"><span class="fa fa-calendar"></span></span>');
    $('#testId').datetimepicker(format: 'YYYY-MM-DD', date : '2019-09-02');

eventA 的代码运行良好。但问题是eventB。当 eventB 第一次发生时，它工作正常。从第二次开始，datetimepicker 根本不起作用。它显示它的形式，但没有日期，并且不能使用 calendar-call-buttn。

我用谷歌搜索了这个问题，发现它是关于使用相同 ID 的问题。所以我尝试使用 name 属性，但结果相同。

帮我...

【问题讨论】：

你在使用哪个datetimepicker？

@NidhinJoseph datetimepicker 是 'eonasdan-bootstrap-datetimepicker'

而不是 id 使用类。两个 html 项不应具有相同的 id

@SangitaKendre 我在课堂上试过，但结果是一样的......

分享更多关于 eventA 和 eventB 的细节。是 ajax 调用或一些 onclick 事件。尽可能分享代码

【参考方案1】：

请您尝试使用 css 类作为 datetimepicker。

<div class="col-sm-3 form-group">
    <b>Date Of Birth :*</b><br>
    <p><input placeholder="dd/mm/yyyy" class="form-control calanderDate" oninput="this.className = ''" name="dateOfBirth" id="dateOfBorth" onblur="defaultValidation(this)"></p>
    <span id="er_passportNumber" style="display: block; width:100%; float: left;"></span>
</div>

<script type="text/javascript">
jQuery(document).ready(function() 
    defaultDateValidation();
);

function defaultDateValidation()
     $(".calenderDate").datetimepicker( 
         dateFormat: "dd/mm/yy"
    ); 

</script>