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

时间:2014-05-06 17:13:20

标签: javascript jquery html web datepicker

我在网站上使用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>

谢谢

2 个答案:

答案 0 :(得分:2)

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

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

HTML:

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

jsfiddle

答案 1 :(得分:1)

我以前做过,我的解决方案:

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

也许有更好的解决方案?