web-dev-qa-db-ja.com

jQuery DatePickerを使用してその場でminDateとmaxDateを変更する

JQuery Datepickerに特定の問題があります。日付範囲を簡単に追加できますが、ユーザーが選択したイベントに応じて選択可能な範囲を変更する必要があります。

したがって、イベント＃1を選択した場合、イベント＃1の日付範囲からのみ日付を選択できます。

ユーザーが新しいイベントを選択するたびに呼び出される簡単な小さな関数を作成しましたが、最初に設定されたminDate/maxDate値のみを表示します。

_function datepicker(startDate, endDate) {
  $( "#date" ).datepicker({
    inline: true,
    minDate: new Date(startDate),
    maxDate: new Date(endDate),
    dateFormat: 'dd/mm/yy' 
  });
}
_

上記の関数を再度呼び出す前に$('#date').datepicker('remove');を呼び出して、正しい日付で新しいインスタンスを作成するかどうかを確認しましたが、機能していないようです。

開発者ツールを使用してすべてのデータを確認しましたが、すべてが呼び出されて正しく渡されています。この作品を私が望むようにするためにできることはありますか？

jqueryjquery-uidatepicker
25
Chuck Le Butt

いくつかのオプションがあります...

1）destroy()ではなくremove()メソッドを呼び出す必要があります...

$('#date').datepicker('destroy');

次に、メソッドを呼び出してdatepickerオブジェクトを再作成します。

2）既存のobjectのプロパティを更新できます

$('#date').datepicker('option', 'minDate', new Date(startDate));
$('#date').datepicker('option', 'maxDate', new Date(endDate));

または...

$('#date').datepicker('option', { minDate: new Date(startDate),
                                  maxDate: new Date(endDate) });
61
Jared

開始日から終了日まで、他の日付ピッカーに入力された日付に基づいて日付を制限する方法を以下に示します。かなりうまくいく：

function activateDatePickers() {
    $("#aDateFrom").datepicker({
        onClose: function() {
            $("#aDateTo").datepicker(
                    "change",
                    { minDate: new Date($('#aDateFrom').val()) }
            );
        }
    });
    $("#aDateTo").datepicker({
        onClose: function() {
            $("#aDateFrom").datepicker(
                    "change",
                    { maxDate: new Date($('#aDateTo').val()) }
            );
        }
    });
}
9
MattC
$(document).ready(function() {
$("#aDateFrom").datepicker({
    onSelect: function() {
        //- get date from another datepicker without language dependencies
        var minDate = $('#aDateFrom').datepicker('getDate');
        $("#aDateTo").datepicker("change", { minDate: minDate });
    }
});

$("#aDateTo").datepicker({
    onSelect: function() {
        //- get date from another datepicker without language dependencies
        var maxDate = $('#aDateTo').datepicker('getDate');
        $("#aDateFrom").datepicker("change", { maxDate: maxDate });
    }
});
});
2
Gregorio Marciano

私はあなたがDatepickerを使用していることを知っていますが、私のようなHTML5入力日付を使用している人のために、同じことを行う方法の例があります： JSFiddle Link

$('#start_date').change(function(){
  var start_date = $(this).val();
  $('#end_date').prop({
    min: start_date
  });
});


/*  prop() method works since jquery 1.6, if you are using a previus version, you can use attr() method.*/
0
Matias Seguel

これを使用して、日付時刻ピッカーの最小日付プロパティを変更しました

$('#date').data("DateTimePicker").minDate(startDate);

これが誰かに役立つことを願っています！

0
Mustufa