1

私はjQueryの日付ピッカーを持っています。ユーザーが日付をクリックしたときに URL パラメーター (日付) を追加する関数を作成しました。日付が設定されている場合setDateは、datepicker のメソッドを使用して、日付を URL パラメータに設定したいと考えています。設定されていない場合は、今日の日付が使用されます。URL から日付を取得できましたが、日付ピッカーの日付が設定されません。そして奇妙なのは、手動で を?date=xxxxxURL に追加するだけで、完全に機能することです。そのため、リダイレクトを発生させようとすると発生していますonSelect

ページはこちらからご覧いただけます。

このページを表示して、パラメーターの手動追加が機能することを確認できます。

4

1 に答える 1

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 () {})ため、日付ピッカーがすぐに初期化され、クエリ文字列に基づいて日付が設定されます。上記のコードは、技術的にはページのどこにでも配置できることを除いて、事実上同じことを行います。DOMを操作するインラインJavascriptは、レンダリング後に実行する必要があります。そのため、実際の例が機能し、それが$(function () {})保証されます。

初期化オプションを使用して、日付ピッカーに最初に日付を設定するより良い方法があると確信していますが、私が提供したものは同じことを行う必要があり、少し不必要です。

アップデート：

このオプションを使用すると、初期化で初期日付を設定できると思います-http://api.jqueryui.com/datepicker/#option-defaultDatedefaultDate

したがって、次を使用できます。

$(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_dateis null（クエリ文字列に一致するものがない）の場合、defaultDate値nullを省略した場合（デフォルト値）と同じように設定し、日付を今日に設定するため、完全に機能するはずです。したがって、クエリ文字列に一致するものがある場合にのみ、デフォルトの日付が今日から変更されます。

于 2013-02-11T19:37:43.710 に答える