Question

我正在使用Twitter Bootstrap并使用this模板。

我遇到关于datepicker的问题，以及此模板中的一些其他类似的事情。当我尝试第二次使用输入时，例如：datepicker的输入，当我专注于输入时，第二个datepicker甚至不显示日历，只弹出第一个。我怎样才能重写这个以便显示日历？

<div class="par">
<label>Check In</label>
<span class="field">
<input id="datepicker" type="text" name="datein" class="input-small"/>
</span>
</div> 

<div class="par">
<label>Check Out</label>
<span class="field">
<input id="datepicker" type="text" name="dateout" class="input-small"/>
</span>
</div>

Answer 1

首先， ID应始终是唯一的。你不能拥有多个具有相同id的元素，其背后的原因是，它不仅会给出W3C验证错误，而且会产生很多问题，其中一个就是你现在面临的问题。

将您的元素ID更改为类并使用类选择器

   ....
 <input type="text" name="datein" class="input-small datepicker"/>
  .....
 <input type="text" name="dateout" class="input-small datepicker"/>

<强>的javascript

 $('.datepicker').datepicker()

我删除了元素的id attr，如果需要，可以添加它，但要确保它的唯一

Answer 2

Datepicker绑定到DOM的第一个元素。

使用唯一ID

$('#datepicker1').datepicker();
$('#datepicker2').datepicker();

标记

<input id="datepicker1" type="text" name="datein" class="input-small"/>
<input id="datepicker2" type="text" name="datein" class="input-small"/>

使用不同的元素绑定datepicker，或使用类

Bootstrap Date Picker不会处理第二个输入

2 个答案: