how to set date input data-options using jquery

Question

I am using JQuery-Mobile datebox , and I want to set date input data-options using JQuery

edit:

my question is : how to set date input data-options using jquery ?

input code :

            <input 
                name="mydate" 
                id="mydate" 
                type="date"
                pickPageTheme="a"
                data-role="datebox"
                data-options='{"mode": "calbox" }' />

Answer 1

The datebox plugin internally relies on data() to parse the data-options attribute, so you can use its setter form instead of creating an explicit attribute:

$("#mydate").data("options", {
    mode: "calbox",
    highDates: ["2011-11-02", "2011-11-03"],
    highDatesAlt: ["2011-11-09", "2011-11-10"],
    pickPageOAHighButtonTheme: "b"
});

Do not forget to refresh the widget afterwards if it's already been created:

$("#mydate").datebox("refresh");

EDIT: Unfortunately, the code above won't work if the datebox widget was automatically created by the mobile framework on page load (since the data-options attribute is only parsed once). To work around that problem, you can use the options method:

$("#jqmdb").datebox("option", {
    mode: "calbox",
    highDatesAlt: ["2011-11-09", "2011-11-10"],
    highDates: ["2011-11-02", "2011-11-03"],
    pickPageOAHighButtonTheme: "b"
});

In that case, however, you have to specify highDatesAlt before highDates, or the former will be ignored.

I updated your fiddle here.