JQuery Datepicker默认日期在页面上有两个时不起作用答案

【问题标题】：JQuery Datepicker Default Date Not Working When Two on PageJQuery Datepicker默认日期在页面上有两个时不起作用
【发布时间】：2017-06-16 14:25:47
【问题描述】：

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

更新： 这两个的 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>

【问题讨论】：

ID 必须是唯一的，因此$( id ) 会让我相信您只选择了一个元素。确保您的元素没有相同的 ID。给他们每个人相同的课程，然后改为$(".className").datepicker( ... )。
您是否尝试过分别为两个日期选择器调用它。或者最好在初始化两者之前将其作为选项对象传递。很高兴看到完整的初始化代码或小提琴
记住，每个页面的 id 必须是唯一的。最好使用 class 进行初始化

标签： javascript jquery datepicker

【解决方案1】：

每个元素的 ID 必须是唯一的。其他任何内容都是无效的 HTML，jQuery 将忽略任何 ID 已在页面上进一步使用的元素。

给两个日期选择器一个相同的类，并将其用作您的选择器。例如

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

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

【讨论】：

感谢您的回复。这两个元素的 id 都是唯一的，我已经更新了我的原始帖子。
然后请显示实际的 HTML，以及您用于设置日期的实际代码。例如你说你使用$( id ).datepicker( "option", "defaultDate", defaultDate )。在这种情况下，id 的确切内容是什么？
更新为包含 html。
好的，谢谢。那么你有没有试过$(".datepicker").datepicker( "option", "defaultDate", defaultDate ); 呢？由于您将“datepicker”作为两个输入的一个类。您没有在 id 变量中说明您当前使用的内容。
是的，我实际上只是测试了按类选择并得到了相同的结果。 id 变量是从我们正在使用的 Web 服务中设置的，在我的原始帖子中，我包含了一些关于 id 外观的 console.logs。我发现奇怪的一件事是默认日期看起来好像是在日历中悬停，但由于某种原因没有被选中。

【解决方案2】：

正如大家所说，只要 ID 是唯一的，它就应该有效。或者如果您不希望该选择器是唯一的，请使用类选择器。为了展示它，请检查下面的 jsfiddle，同时使用 ids 和 classes，并使用选项对象而不是传递 { 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 });
});

【讨论】：