Question

我在网站上使用jQuery [Datepicker] [1]。我在以不同方式在同一页面上显示2个日期选择器时遇到问题。

只有在您单击文本框后才会显示一个，并且一旦您选择了日期，它就会消失。第二，我想显示内联，但我无法控制一个与另一个混乱。

我需要帮助找到一个解决方法，所以我可以在同一页面上以不同的方式使用2个日期选择器。我尝试给第二个单独的id，但那不起作用。

我的第一个日期选择器代码：

<script> <!-- Datepicker -->
$(function() {
$( ".datepicker" ).datepicker();
});
</script>

<input type="text" class="search-input datepicker" placeholder="Check-In">

<input type="text" class="search-input datepicker" placeholder="Check-Out">

这是我的第二个日期选择器代码：

<script>
$(function() {
$( "#datepicker2" ).datepicker({
  numberOfMonths: 3,
  showButtonPanel: true
});
});
</script>

<p><input type="text" id="datepicker2"></p>

谢谢

Answer 1

只需为每个文本框指定一个唯一ID，然后使用该ID创建日期选择器。然后，您可以在每个datepicker()电话中添加您想要的任何选项：

$(function() 
{
    $( "#datepicker1" ).datepicker();
    $( "#datepicker2" ).datepicker();
});

HTML：

<p><input type="text" id="datepicker1"></p>
<div id="datepicker2"></div>

jsfiddle

Answer 2

我以前做过，我的解决方案：

<script> <!-- Datepicker -->
$(function() 
{
    $( "#datepicker1" ).datepicker();
    $( "#datepicker2" ).datepicker();
});
</script>

<input type="text" class="search-input datepicker" placeholder="Check-In">

<input type="text" class="search-input datepicker2" placeholder="Check-Out">

也许有更好的解决方案？

jQuery Datepicker，在同一页面上显示2个不同的datepickers

2 个答案: