Question

我正在使用JQuery-Mobile datebox，我想使用JQuery设置日期输入数据选项

编辑：

我的问题是：如何使用jquery设置日期输入数据选项？

输入代码：

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

Answer 1

datebox插件在内部依赖于data()来解析data-options属性，因此您可以使用其setter表单而不是创建显式属性：

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

如果已经创建了小部件，请不要忘记刷新小部件：

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

编辑：遗憾的是，如果在页面加载时移动框架自动创建了日期框小部件，则上述代码将无效（因为data-options属性仅解析一次）。要解决该问题，您可以使用options方法：

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

但是，在这种情况下，您必须在 highDatesAlt之前指定highDates ，否则前者将被忽略。

我更新了你的小提琴here。

Answer 2

如果您有以下代码：

<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>

并使用：

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

它不会像在第一个代码段中那样工作。确保您拥有正确的名称和相应的ID。

正确代码：

<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>

这很愚蠢但非常重要。希望这有帮助。

如何使用jquery设置日期输入数据选项

2 个答案: