jQuery DateTime Picker的多个实例 [英] Multiple instances of jQuery DateTime Picker

问题描述

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

This is how I define my datetime picker

$('.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中的字段。请看下面的图片：

This works for the fields in branch 1. Have a look at the following picture:

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

The top two fields get their date correctly. But when I focus the bottom input field and set a date, not the bottom field is set but the top field. This is wrong, the bottom field should get the date.

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

I cannot access each input field by id because the input field is created dynamically and there are many of them. Any ideas what is wrong here?

推荐答案

你不应该在html元素上多次使用相同的id页。从... 和< input id =查看< input id =到...

You should not use the same id on an html element more than one time at the same page. Look at your <input id="from" ... and <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>

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

This should fix your datepicker issue.

这篇关于jQuery DateTime Picker的多个实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！