我有一个jQuery datepicker。我写了一个函数,当用户点击日期时会添加一个URL参数(日期)。如果设置了日期,我想使用datepicker的setDate
方法将日期设置为URL参数。如果未设置,将使用今天的日期。我已经完成了从URL获取日期,但是日期选择器的日期没有设置。奇怪的是,如果我只是手动将?date=xxxxx
添加到网址,它就能完美运行。因此,当我尝试使用onSelect
可以查看页面here。
可以查看This page以查看手动添加参数是否有效。
答案 0 :(得分:3)
它与重定向无关。它与您在页面上的事件顺序有关。在不起作用的页面上,您在.datepicker
内进行了$(function () {})
初始化,这意味着它将在DOM准备就绪时运行(在其他Javascript之后)。这只是对事件的约束。然后,在绑定事件后立即尝试调用.datepicker("setDate",qs_date)
。但是你不能这样做,因为你的日期选择器还没有被初始化,因为$(function() {})
中的函数还没有被执行。您应该使用以下代码:
$(function() {
$("#datepicker").datepicker({
onSelect: function(date, picker){
var url = "http://wwwdev.cco.purdue.edu/asp/Calendar/matt_test.asp?date=" + date;
window.location = url;
}
});
var qs_date = location.href.match(/[?&]date=([^&#]+)/);
if (qs_date){
qs_date = qs_date[1];
alert(qs_date);
$("#datepicker").datepicker("setDate",qs_date);
}
});
在工作示例中,您不使用$(function () {})
,因此会立即初始化datepicker,然后根据查询字符串设置日期。上面的代码有效地做了同样的事情,除了技术上可以放在页面的任何地方。操作DOM的内联Javascript需要在呈现后运行。这就是工作示例有效的原因,也是$(function () {})
也保证的原因。
我确信有一个更好的方法可以通过初始化选项在datepicker上初始设置日期,但我提供的内容应该做同样的事情,只是有点不必要。
<强>更新强>
我认为 defaultDate
选项允许您在初始化中设置初始日期 - http://api.jqueryui.com/datepicker/#option-defaultDate
所以你可以使用:
$(function() {
var qs_date = location.href.match(/[?&]date=([^&#]+)/);
if (qs_date) {
qs_date = qs_date[1];
//alert(qs_date);
}
$("#datepicker").datepicker({
defaultDate: qs_date,
onSelect: function(date, picker){
var url = "http://wwwdev.cco.purdue.edu/asp/Calendar/matt_test.asp?date=" + date;
window.location = url;
}
});
});
它应该是完美的,因为如果qs_date
是null
(查询字符串中没有匹配项),那么将defaultDate
值设置为null
与省略它相同(默认值)并将日期设置为今天。因此,只有在查询字符串中存在匹配项时,默认日期才会从今天开始更改。