StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POPopulating jQuery mobile datebox with restricted dates dynamically
text
Body
copied!<p>I'm having trouble with the datebox plugin for jQuery mobile.</p> <p>In my code I am generating an array of dates in ISO8601 format as this is what datebox requires.</p> <p>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:</p> <pre><code><input name="mydate" id="mydate" type="date" data-role="datebox"> </code></pre> <p>My jQuery code looks like this:</p> <pre><code>$("#NewPaymentPlans").attr("data-options", '{"mode": "calbox", "enableDates": ' + DateString + ' }'); </code></pre> <p>DateString being an array of dates converted into a string.</p> <p>The output HTML looks like this:</p> <pre><code><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;] }"> </code></pre> <p>(& quot; appears as a double quote in the HTML displayed by Chrome).</p> <p>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.</p> <p>I think there may be a problem with assigning data-options attributes dynamically. Does anyone know more about this?</p> <p><strong>EDIT: Solved!</strong></p> <p>I've figured it out.</p> <pre><code>$("#NewPaymentPlans").data('mobileDatebox').options.enableDates = arrayofdates $('#NewPaymentPlans').datebox('refresh'); </code></pre> <p>In combination with this function:</p> <pre><code>function CreateDateArray(arrayofdates) { var datesarray = []; var stringofdates; $.each(arrayofdates, function (i) { datesarray.push(arrayofdates[i].toISOString().substring(0, 10)); }); return datesarray </code></pre> <p>}</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload