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

【问题标题】：how to set date input data-options using jquery如何使用 jquery 设置日期输入数据选项
【发布时间】：2011-11-21 08:03:10
【问题描述】：

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

编辑：

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

输入代码：

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

【问题讨论】：

@Jasper 问题设置在标题中！ “如何使用 jquery 设置日期输入数据选项？”

标签： jquery calendar jquery-mobile datebox

【解决方案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。

【讨论】：

谢谢。此代码中的 highDatesAlt 是否相同' ' ? ?
是的，它应该，你只需要将字符串“反序列化”成你传递给data()的Javascript对象。
当然，请参阅我的更新答案。你只需要写下你在字符串中看到的内容 :) 我删除了键周围的双引号，因为我更喜欢这种风格，但留下它们是完全有效的。
有趣，refresh() 显然没有按预期更新现有小部件的状态。销毁和重新创建小部件有些工作，但会克隆 UI 元素，因此destroy() 也会留下一些东西 (fiddle)。我能做到的最好的办法是改用option 方法，但它似乎忽略了highDatesAlt (fiddle)。我会进一步调查（在我的时区已经很晚了）并及时通知您。
好的，非常感谢。很抱歉让你迟到了，我会等待更新，

【解决方案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");

它不会像第一个代码 sn-p 那样工作。确保您拥有正确的姓名和相应的 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>

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

【讨论】：