jQuery Datepicker，在同一页面上显示 2 个不同的日期选择器

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，然后使用它来创建日期选择器。然后，您可以在每个 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">

也许有更好的解决方案？