web-dev-qa-db-ja.com

Bootstrap datepicker change minDate / startDate from another datepicker

私のページには日付ピッカーが2つあり、両方ともブートストラップです。条件は、開始日が終了日に対して高くなることはないということだけです。開始日が日付ピッカーによって変更された場合は終了日属性（minDate）を変更し、終了日が変更された場合も同じように変更する必要があります。

私の問題を理解してほしい

$(document).ready(function(){
  
      $("#startdate").datepicker({
       
        todayBtn:  1,
        autoclose: true,
       
       
      }).on('changeDate', function (selected) {
        var minDate = new Date(selected.date.valueOf());
        $('#enddate').datetimepicker('setStartDate', minDate);
    });
    
        $("#enddate").datepicker();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">



<input type="text" placehoder="Start Date" id="startdate"/>
<input type="text" placehoder="End Date" id="enddate"/>
javascriptjquerytwitter-bootstrapbootstrap-datepicker
14
vikujangid

jsfiddle を実行しました。 pqdongがコメントしたように、終了日を設定するときにdatepickerではなくdatetimepickerを呼び出していました。

動作するjavascriptは次のとおりです。

$(document).ready(function(){

    $("#startdate").datepicker({
        todayBtn:  1,
        autoclose: true,
    }).on('changeDate', function (selected) {
        var minDate = new Date(selected.date.valueOf());
        $('#enddate').datepicker('setStartDate', minDate);
    });

    $("#enddate").datepicker()
        .on('changeDate', function (selected) {
            var maxDate = new Date(selected.date.valueOf());
            $('#startdate').datepicker('setEndDate', maxDate);
        });

});
66
Razzildinho

私はRazzildinhoの優れた答えについてコメントするのに十分な評判はありませんが、ユーザーを助ける1つの小さな追加を提供したかったのです。これを行うには、次の行を追加します。

$('#enddate').datepicker('setDate', minDate);

したがって、コンテキストでは次のようになります。

$(document).ready(function(){

$("#startdate").datepicker({
    todayBtn:  1,
    autoclose: true,
}).on('changeDate', function (selected) {
    var minDate = new Date(selected.date.valueOf());
    $('#enddate').datepicker('setStartDate', minDate);
    $('#enddate').datepicker('setDate', minDate); // <--THIS IS THE LINE ADDED
});

$("#enddate").datepicker()
    .on('changeDate', function (selected) {
        var maxDate = new Date(selected.date.valueOf());
        $('#startdate').datepicker('setEndDate', maxDate);
    });

});
2
Sharky Laguana