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