jQuery DateTime Picker的多个实例

Question

这是我定义日期时间选择器的方式

$('.datetimepicker').datetimepicker({
    dateFormat: 'y-m-d',
    timeFormat: 'h:m:s'
});

HTML：

<div class="branch">
    <h2>Branch 1</h2>
    <input id="from" class="datetimepicker" type="text" name="from"/>
    <input id="to" class="datetimepicker" type="text" name="to"/>
   </div>
   <div class="branch">
    <h2>Branch 2</h2>
    <input id="from" class="datetimepicker" type="text" name="from"/>
    <input id="to" class="datetimepicker" type="text" name="to"/>
   </div>

这适用于分支1中的字段。请看下面的图片：

前两个字段正确显示日期。 但是当我对底部输入字段进行聚焦并设置日期时，不会设置底部字段，而是设置顶部字段。 这是错误的，底部字段应该得到日期。

我无法通过id访问每个输入字段，因为输入字段是动态创建的，并且有很多输入字段。 任何想法在这里有什么不对？

Answer 1

您不应该在同一页面上多次在html元素上使用相同的id。 <input id="from" ...和<input id="to" ... <input id="from" ... <input id="to" ...

<div class="branch">
    <h2>Branch 1</h2>
    <input id="from_1" class="datetimepicker" type="text" name="from"/>
    <input id="to_1" class="datetimepicker" type="text" name="to"/>
   </div>
   <div class="branch">
    <h2>Branch 2</h2>
    <input id="from_2" class="datetimepicker" type="text" name="from"/>
    <input id="to_2" class="datetimepicker" type="text" name="to"/>
   </div>

这应该可以解决您的日期选择问题。