Populating jQuery mobile datebox with restricted dates dynamically

Question

I'm having trouble with the datebox plugin for jQuery mobile.

In my code I am generating an array of dates in ISO8601 format as this is what datebox requires.

I am generating this array after an ajax method has been called and brought some results back (in response to user input). I am then using the jQuery .attr function to add a data-options attribute to my "calbox" node which looks like this:

<input name="mydate" id="mydate" type="date" data-role="datebox">

My jQuery code looks like this:

$("#NewPaymentPlans").attr("data-options", '{"mode": "calbox", "enableDates": ' +      DateString + ' }');

DateString being an array of dates converted into a string.

The output HTML looks like this:

<input name="NewPaymentPlans" id="NewPaymentPlans" type="text" data-role="datebox" class="ui-input-text ui-body-c" readonly="readonly" data-options="{&quot;mode&quot;: &quot;calbox&quot;, &quot;enableDates&quot;: [&quot;2013-08-06&quot;, &quot;2013-08-07&quot;, &quot;2013-08-08&quot;, &quot;2013-08-09&quot;, &quot;2013-08-10&quot;, &quot;2013-08-11&quot;, &quot;2013-08-12&quot;, &quot;2013-08-13&quot;, &quot;2013-08-14&quot;, &quot;2013-08-15&quot;, &quot;2013-08-16&quot;, &quot;2013-08-17&quot;, &quot;2013-08-18&quot;, &quot;2013-08-19&quot;, &quot;2013-08-20&quot;, &quot;2013-08-21&quot;, &quot;2013-08-22&quot;, &quot;2013-08-23&quot;, &quot;2013-08-24&quot;, &quot;2013-08-25&quot;, &quot;2013-08-26&quot;, &quot;2013-08-27&quot;, &quot;2013-08-28&quot;, &quot;2013-08-29&quot;, &quot;2013-08-30&quot;, &quot;2013-08-31&quot;, &quot;2013-09-01&quot;, &quot;2013-09-02&quot;, &quot;2013-09-03&quot;, &quot;2013-09-04&quot;] }">

(& quot; appears as a double quote in the HTML displayed by Chrome).

From what I can see, this should work. I did a test where I used my output code and filled in the data-options options so that the page loaded with them and it worked.

I think there may be a problem with assigning data-options attributes dynamically. Does anyone know more about this?

EDIT: Solved!

I've figured it out.

$("#NewPaymentPlans").data('mobileDatebox').options.enableDates = arrayofdates
$('#NewPaymentPlans').datebox('refresh');

In combination with this function:

function CreateDateArray(arrayofdates) {
var datesarray = [];
var stringofdates;
$.each(arrayofdates, function (i) {
    datesarray.push(arrayofdates[i].toISOString().substring(0, 10));
});
return datesarray

}

Answer 1

Try calling $('#NewPaymentPlans').datebox('refresh') after you populate it dynamically.