4

ユーザーが日付範囲を選択できるように、2 つの日付ピッカーを接続しようとしています。

次のようなコードを作成しました。

$(function() {
    var dates = $("#fromDate, #toDate").datepicker({
        dateFormat: 'yy-mm-dd',
        changeMonth: true,
        changeYear: true,
        minDate: new Date(2010, 2 - 1, 2),
        onSelect: function(selectedDate) {
            var option = this.id == "fromDate" ? "minDate" : "maxDate",
                instance = $(this).data("datepicker"),
                date = $.datepicker.parseDate(
                instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
            dates.not(this).datepicker("option", option, date);
        }
    });
});

これは正常に動作しますが、奇妙なエラーが発生します。最初の入力を使用して日付を選択すると、日付ピッカーが 2 番目の日付を表示します。onSelect 関数は、2 番目の日付ピッカーに基づいて何らかの日付を設定すると思います。

最初の日付ピッカーの日付が 2 番目と同じ月の場合、このエラーは表示されません。

この動作を再現する方法:

  • 最初の日付ピッカーで「2010-02-05」を選択します（2番目の月と年のフィールドの日付をクリックした後、2番目の日付ピッカーから月と年に変更されます）

これは私の jsFiddle です: http://jsfiddle.net/Misiu/TyQSG/1/

onSelectこのバグを取り除くには、関数をどのように変更すればよいですか?

4

2 に答える 2

7

これを確認してください。私はこれがあなたが望むものだと思いますか？

UI の例に従ってコードを変更しました。

$(function() {
    $( "#fromDate" ).datepicker({
        dateFormat: 'yy-mm-dd',
        changeMonth: true,
        changeYear: true,
        minDate: new Date(2010, 2 - 1, 2),
        onSelect: function( selectedDate ) {
            $( "#toDate" ).datepicker( "option", "minDate", selectedDate );
        }
    });
    $( "#toDate" ).datepicker({
        dateFormat: 'yy-mm-dd',
        changeMonth: true,
        changeYear: true,
        minDate: new Date(2010, 2 - 1, 2),
        onSelect: function( selectedDate ) {
            $( "#fromDate" ).datepicker( "option", "maxDate", selectedDate );
        }
    });
});​

フィドル

于 2012-08-10T13:10:49.797 に答える
1

これは、日付ピッカーコードに明らかにバグがあるという事実を解決するものではありませんが、回避策です。

showAnimを空に設定すると、アニメーションは表示されず、前のカレンダーの日付は表示されません。 

 showAnim:"",
于 2012-08-10T12:15:32.030 に答える