I'm using Jquery datepickers to collect two dates on the same page, the calendars display correctly and I'm able to collect the input dates fine however, on the occasion a default date is supplied to JQuery, it only populates the first datepicker on the page. I'm using $( id ).datepicker( "option", "defaultDate", defaultDate ); to attempt to set the default date where the var id is the html id of the datepickers and defaultDate var is the date to set. How do I get the default date to populate in both datepickers?

Update: The html ids for both of these are unique. Here are some logs from the console-

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

I also noticed while debugging that the default date for the second datepicker value appears to be selected on the calendar, but not displayed in the corresponding textbox (see image below).

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

I'm using Jquery datepickers to collect two dates on the same page, the calendars display correctly and I'm able to collect the input dates fine however, on the occasion a default date is supplied to JQuery, it only populates the first datepicker on the page. I'm using $( id ).datepicker( "option", "defaultDate", defaultDate ); to attempt to set the default date where the var id is the html id of the datepickers and defaultDate var is the date to set. How do I get the default date to populate in both datepickers?

Update: The html ids for both of these are unique. Here are some logs from the console-

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

I also noticed while debugging that the default date for the second datepicker value appears to be selected on the calendar, but not displayed in the corresponding textbox (see image below).

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

• javascript
• jquery
• datepicker

• 1 ID's must be unique, therefore $( id ) would lead me to believe you're only selecting one element. Make sure your elements don't have the same ID. Give them each the same class, and do $(".className").datepicker( ... ) instead. – Tyler Roper Commented Jun 16, 2017 at 14:27
• have you tried calling this for both datepickers separately. or better pass this as a options object before you initialise both. Would be good to see full initialisation cod or fiddle – Farrukh Subhani Commented Jun 16, 2017 at 14:27
• Remember, id has to be unique per page.. Better to initialize with the class – Guruprasad J Rao Commented Jun 16, 2017 at 14:28

2 Answers 2

IDs must be unique to each element. Anything else is invalid HTML and jQuery will ignore any element with an ID which has already been used further up the page.

Give both datepickers the same class instead and use that as your selector. e.g.

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

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

As everybody is saying, as long as Id's are unique, it should work. or use a class selector instead if you don't want that selector to be unique. And to show it, check the jsfiddle below using both, ids and classes and also using the options object instead of the setter syntax where you pass { defaultDate: defaultDate }, you might like that better.

jsfiddle here

Code:

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