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.

Answer 2

If you have code like:

<input name="myMEETINGdate" id="mydate" type="date" data-role="datebox"
      data-options='{"mode": "calbox","dateFormat":"%m/%d/%Y","calUsePickers": true, "calNoHeader": true,"highDates": ["07-20-2012", "2011-12-25"] }'>
</input>

And Use:

$("#myminutesdate").datebox( "option",{highDates: ["2012-08-08", "2012-11-03"] });                       
$("#myminutesdate").datebox("refresh");

It would not work as in the first code snippet. Make sure you have the correct name and corresponding ID.

Correct Code:

<input name="myminutesdate" id="myminutesdate" type="date" data-role="datebox"
     data-options='{"mode": "calbox","dateFormat":"%m/%d/%Y","calUsePickers": true, "calNoHeader": true,"highDates": ["2012-12-07" , "2012-07-12"] }' >
</input>

It's silly but very important. Hope this helped.