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, Nov 21 '11 at 19:42

Frédéric Hamidi · Accepted Answer · 2011-11-22T18:21:58.953

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 '11 at 18:21

answered Nov 21 '11 at 20:07

Frédéric Hamidi

258,201
41
486
479

thanks. does it the same for highDatesAlt in this code ' ' ?? – Bader Nov 21 '11 at 21:46
Yes, it should, you only have to mentally "deserialize" the string into the Javascript object you pass to `data()`. – Frédéric Hamidi Nov 21 '11 at 22:02
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 Nov 21 '11 at 22:05
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](http://jsfiddle.net/vXthd/5/)). The best I could manage was to use the `option` method instead, but it seems to ignore `highDatesAlt` ([fiddle](http://jsfiddle.net/vXthd/6/)). I'll investigate further (it's getting late in my timezone) and keep you posted. – Frédéric Hamidi Nov 21 '11 at 23:38
ok thank you very much. sorry to make you stay late, I will wait updates from, – Bader Nov 21 '11 at 23:43
give .datebox("hardreset") a shot instead - it's a bit more liberal than the refresh methood – J.T.Sage Nov 22 '11 at 00:52
@J.T.Sage I have used $("#mydate").datebox("hardreset"); rather than $("#mydate").datebox("refresh"); in http://jsfiddle.net/vXthd/ but nothing is changed – Bader Nov 22 '11 at 07:22
@Adham, finally got it to work, the `options` method requires `highDatesAlt` to be specified before `highDates` for some reason. See my updated answer. – Frédéric Hamidi Nov 22 '11 at 18:22

score 0 · Answer 2 · edited Jul 23 '12 at 19:59

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.

how to set date input data-options using jquery

2 Answers2