1

我有一个 jQuery 日期选择器。我编写了一个函数，当用户单击日期时会添加一个 URL 参数（日期）。如果设置了日期，我想使用setDatedatepicker 的方法将日期设置为 URL 参数。如果未设置，将使用今天的日期。我已经完成了从 URL 获取日期，但没有设置日期选择器的日期。奇怪的是，如果我只是手动添加?date=xxxxx到 url，它就可以完美运行。因此，当我尝试使用onSelect

页面可以在这里查看。

可以查看这个页面，可以看到手动添加参数是有效的。

4

1 回答 1

3

它与重定向无关。它与您页面上的事件顺序有关。在不起作用的页面上，您在.datepicker内部进行了初始化$(function () {})，这意味着它将在 DOM 准备好时运行（在您的 Javascript 的其余部分之后）。那只是绑定一个事件。然后，在绑定事件后立即尝试调用.datepicker("setDate",qs_date). 但是你不能这样做，因为你的日期选择器还没有被初始化，因为函数 in$(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 () {})保证的原因。

我确信有更好的方法可以通过它的初始化选项在日期选择器上初始设置日期，但是我提供的应该做同样的事情，只是有点不必要。

更新：

我认为该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与省略它（其默认值）相同并将日期设置为今天。因此，只有在查询字符串中有匹配项时，默认日期才会从今天开始更改。

于 2013-02-11T19:37:43.710 回答