1

https://github.com/eternicode/bootstrap-datepickerの日付ピッカーを使用する Twitter Bootstrap に基づく日付ピッカーに取り組んでいます。

ユーザーが2つの日付を選択し、変更時に後のカレンダーを更新できるようにするようなことを拡張したかった

  • 出発日を選択
  • 返却日: 返却日が常に出発日より前になるように、出発日より前の日付の選択を無効にしました。

現在、以下を使用していますが、一度しか機能しません...

$("#depart_date").datepicker(dp)
    .on('changeDate',function(ev){


        $("#return_date").datepicker({
                フォーマット:defaultDateFormat,
                オートクローズ:真、
                startDate: $("#depart_date").val()

            });

    });

どうすればこれを達成できますか?

4

1 に答える 1

2

これをjsFiddleにまとめました。うまくいけば、それがあなたの要件を満たします。setStartDate初期化後に最小日付を更新する場合は、datepicker で使用する必要がある関数があることに注意してください。

HTML

<input type="text" class="span2" value="02-16-2012" id="depart-date">
<input type="text" class="span2" value="02-16-2012" id="return-date">

JavaScript

$(function() {

    // create the departure date
    $('#depart-date').datepicker({
        autoclose: true,
        format: 'mm-dd-yyyy',
    }).on('changeDate', function(ev) {
        ConfigureReturnDate();
    });


    $('#return-date').datepicker({
        autoclose: true,
        format: 'mm-dd-yyyy',
        startDate: $('#depart-date').val()
    });

    // Set the min date on page load
    ConfigureReturnDate();

    // Resets the min date of the return date
    function ConfigureReturnDate() {
         $('#return-date').datepicker('setStartDate', $('#depart-date').val());
    }

});​

または、誰かが作成した日付範囲ピッカーがここにあります。

于 2012-12-21T12:35:16.100 に答える