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" }' />

@Jasper the question is set in the title ! "how to set date input data-options using jquery?" — Bader
– Bader, Commented Nov 21, 2011 at 19:42

Frédéric Hamidi · Accepted Answer · 2011-11-22 18:21:58Z

3

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.

edited Nov 22, 2011 at 18:21

answered Nov 21, 2011 at 20:07

Frédéric Hamidi

264k42 gold badges497 silver badges486 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Bader Over a year ago

thanks. does it the same for highDatesAlt in this code ' <input id="jqmdb" data-role="datebox" data-options='{ "mode":"calbox", "highDates": ["2011-11-02","2011-11-03"], "highDatesAlt": ["2011-11-09", "2011-11-10"], "pickPageOAHighButtonTheme": "b" }' name="jqmdb" />' ??

Frédéric Hamidi Over a year ago

Yes, it should, you only have to mentally "deserialize" the string into the Javascript object you pass to data().

Frédéric Hamidi Over a year ago

Sure, see my updated answer. You only have to write what you see in the string :) I removed the double quotes around the keys because I prefer that style, but it's perfectly valid to leave them.

Frédéric Hamidi Over a year ago

Interesting, refresh() apparently does not update the state of an existing widget as expected. Destroying and recreating the widget somewhat works, but clones the UI elements, so destroy() also leaves something behind (fiddle). The best I could manage was to use the option method instead, but it seems to ignore highDatesAlt (fiddle). I'll investigate further (it's getting late in my timezone) and keep you posted.

Bader Over a year ago

ok thank you very much. sorry to make you stay late, I will wait updates from,

|

Chad Ferguson · Accepted Answer · 2012-07-23 19:59:17Z

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.

Collectives™ on Stack Overflow

how to set date input data-options using jquery

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related