jQuery DatePicker - オンザフライでminDateとmaxDateを変更する

Question

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');を呼び出して試してみたが、動作するようには思えません。

デベロッパーツールを使用してすべてのデータを確認しましたが、すべてが呼び出されて正しく渡されました。この仕事を私が望むようにするために何かできることはありますか？

Answer 1

あなたは...

1のオプションのカップルを持っている）あなたはそう...そして、

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

がdatepickerオブジェクトを再作成するためにあなたのメソッドを呼び出すremove()destroy()メソッドを呼び出す必要はありません。

2）あなたは

日まで/からの場合

$('#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) }); 

Answer 2

を経由して、既存のobjectのプロパティを更新することができ、ここで私がベースの日付を制限する実装方法です他の日付ピッカーに入力された日付。かなり良い作品：

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()) } 
      ); 
     } 
    }); 
} 

Answer 3

$(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 }); 
    } 
}); 
}); 

Answer 4

私はあなたが日付ピッカーを使用している知っているが、私と同じように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.*/