当页面上有两个时，JQuery Datepicker默认日期不起作用

Question

我使用Jquery日期选择器在同一页面上收集两个日期，日历显示正确，我可以收集输入日期，但是，在JQuery提供默认日期的情况下， 它只填充页面上的第一个日期选择器。我正在使用 $( id ).datepicker( "option", "defaultDate", defaultDate ); 尝试设置var id是datepickers的html id的默认日期，defaultDate var是要设置的日期。如何在两个datepickers中填充默认日期？

更新  两者的html ID都是唯一的。以下是控制台中的一些日志 -

//default date sets correctly

default date 06/01/2017  
id#opa_global_global_BeginBus


//does not set

default date 06/30/2017
id#opa_global_global_a_TempVendor

我还注意到在调试时，第二个datepicker值的默认日期似乎在日历上被选中，但没有显示在相应的文本框中（见下图）。

HTML

<!--has default date --->
    <div id="rn_CalendarInput_40" class="rn_CalendarInput">
        <input type="text" class="datepicker form-control hasDatepicker" id="opa_global_global_BeginBus" name="opa_global_global_NysBeginBus" placeholder="MM/DD/YYYY" value="06/01/2017" aria-required="true"><img class="ui-datepicker-trigger" src="assets/images/calendar.gif" alt="Select date" title="Select date">   
    </div>

<!--does not have default date--->
<div id="rn_CalendarInput_46" class="rn_CalendarInput">
    <input type="text" class="datepicker form-control hasDatepicker" id="opa_global_global_TempVendor" name="opa_global_global_TempVendor" placeholder="MM/DD/YYYY" value="06/30/2017"><img class="ui-datepicker-trigger" src="/assets/images/calendar.gif" alt="Select date" title="Select date">  
</div>

Answer 1

每个元素的ID必须是唯一的。其他任何东西都是无效的HTML和jQuery将忽略任何已经在页面上已经使用过的ID的元素。

将两个datepickers改为同一个类，并将其用作选择器。 e.g。

<input id="dp1" class="datepicker"/>
<input id="dp2" class="datepicker"/>

$(".datepicker").datepicker( "option", "defaultDate", defaultDate ); 

Answer 2

正如每个人都说的那样，只要Id是独一无二的，它就应该有效。或者如果您不希望该选择器是唯一的，请使用类选择器。要显示它，请使用两者，ID和类检查下面的jsfiddle，并使用options对象而不是传递{ defaultDate: defaultDate }的setter语法，您可能更喜欢它。

jsfiddle here

代码：

$(function(){
    var defaultDate = new Date('7/01/2016');
    $('#first').datepicker();
    $('#second').datepicker();
    $('#first, #second').datepicker("option", "defaultDate", defaultDate);
    $('.date').datepicker({ defaultDate: defaultDate });
});