动态填充带有限制日期的jQuery移动日期框

Populating jQuery mobile datebox with restricted dates dynamically

本文关键字:日期 jQuery 移动 动态 有限制 填充      更新时间:2023-09-26

我在jQuery mobile的日期框插件上遇到问题。

在我的代码中,我生成了一个ISO8601格式的日期数组,因为这是datebox所需要的。

在调用ajax方法并返回一些结果(响应用户输入)之后,我生成了这个数组。然后,我使用jQuery.attr函数向我的"calbox"节点添加一个数据选项属性,它看起来像这样:

<input name="mydate" id="mydate" type="date" data-role="datebox">

我的jQuery代码如下:

$("#NewPaymentPlans").attr("data-options", '{"mode": "calbox", "enableDates": ' +      DateString + ' }');

DateString是转换为字符串的日期数组。

输出HTML如下所示:

<input name="NewPaymentPlans" id="NewPaymentPlans" type="text" data-role="datebox" class="ui-input-text ui-body-c" readonly="readonly" data-options="{&quot;mode&quot;: &quot;calbox&quot;, &quot;enableDates&quot;: [&quot;2013-08-06&quot;, &quot;2013-08-07&quot;, &quot;2013-08-08&quot;, &quot;2013-08-09&quot;, &quot;2013-08-10&quot;, &quot;2013-08-11&quot;, &quot;2013-08-12&quot;, &quot;2013-08-13&quot;, &quot;2013-08-14&quot;, &quot;2013-08-15&quot;, &quot;2013-08-16&quot;, &quot;2013-08-17&quot;, &quot;2013-08-18&quot;, &quot;2013-08-19&quot;, &quot;2013-08-20&quot;, &quot;2013-08-21&quot;, &quot;2013-08-22&quot;, &quot;2013-08-23&quot;, &quot;2013-08-24&quot;, &quot;2013-08-25&quot;, &quot;2013-08-26&quot;, &quot;2013-08-27&quot;, &quot;2013-08-28&quot;, &quot;2013-08-29&quot;, &quot;2013-08-30&quot;, &quot;2013-08-31&quot;, &quot;2013-09-01&quot;, &quot;2013-09-02&quot;, &quot;2013-09-03&quot;, &quot;2013-09-04&quot;] }">

("在Chrome显示的HTML中显示为双引号)。

据我所见,这应该行得通。我做了一个测试,使用了我的输出代码,并填写了数据选项选项,这样页面就可以加载这些选项并正常工作。

我认为动态分配数据选项属性可能存在问题。有人对此了解更多吗?

编辑:已解决

我已经想通了。

$("#NewPaymentPlans").data('mobileDatebox').options.enableDates = arrayofdates
$('#NewPaymentPlans').datebox('refresh');

结合此功能:

function CreateDateArray(arrayofdates) {
var datesarray = [];
var stringofdates;
$.each(arrayofdates, function (i) {
    datesarray.push(arrayofdates[i].toISOString().substring(0, 10));
});
return datesarray

}

在动态填充$('#NewPaymentPlans').datebox('refresh')之后,尝试调用它。