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

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

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