2017-09-01 1 views
1

プラグインDateTimePickerにこの範囲の後の特定の3番目の日付を加えて日付の範囲を設定する必要があります。DateTimePicker:日付の範囲とその後の日付を設定する

HTML

<div class="form-group"> 
    <label for="startdate" class="control-label">Start Date</label> 
    <div class="input-group date" id="startdate"> 
    <input type="text" class="form-control" /> 
    <span class="input-group-addon"> 
     <span class="glyphicon-calendar glyphicon text-primary"></span> 
    </span> 
    </div><!-- input-group --> 
</div><!-- form-group --> 

<div class="form-group"> 
    <label for="enddate" class="control-label">End Date</label> 
    <div class="input-group date" id="enddate"> 
    <input type="text" class="form-control" /> 
    <span class="input-group-addon"> 
     <span class="glyphicon-calendar glyphicon text-primary"></span> 
    </span> 
    </div><!-- input-group --> 
</div><!-- form-group --> 

<div class="form-group"> 
    <label for="thirddate" class="control-label">Third Date</label> 
    <div class="input-group date" id="thirddate"> 
    <input type="text" class="form-control" /> 
    <span class="input-group-addon"> 
     <span class="glyphicon-calendar glyphicon text-primary"></span> 
    </span> 
    </div><!-- input-group --> 
</div><!-- form-group --> 

をJAVASCRIPT

$(function() { 

    //Enablabling linked pickers 
    $('#startdate,#enddate,#thirddate').datetimepicker({ 
     format: 'MM/DD/YYYY', 
     useCurrent: false 
    }); 

    //Setting the range of dates 
    $("#startdate").on("dp.change", function (e) { 
     $('#enddate').data("DateTimePicker").minDate(e.date); 
    }); 
    $("#enddate").on("dp.change", function (e) { 
     $('#startdate').data("DateTimePicker").maxDate(e.date); 
    }); 

    //Setting a third date in the future after the range 
    $("#thirddate").on("dp.change", function (e) { 
     $('#enddate').data("DateTimePicker").minDate(e.date); 
    }); 
}); 

範囲についてDateTimePickersを正常に動作しているが、第三1:

この

は、私がこれまで持っているコードです。それはminDate値を適切に取っていないためです。

+0

btw $( "startdate")に入力ミスがありませんか?それは$( "#startdate")であってはなりませんか? –

+0

ありがとう、私はタイプミスを編集しました。残念ながらそれは理由ではない、私のソースコードではOKだった。 – nicozica

+0

HTMLマークアップを投稿できますか? 3番目の日付が選択されている場合はどうなりますか? –

答えて

1

希望します。 3番目の日付選択ツールでは、終了日以降に日付を選択できます。

<script> 
    $(document).ready(function() { 
     //Enablabling linked pickers 
     $('#startdate,#enddate,#thirddate').datetimepicker({ 
      format: 'MM/DD/YYYY', 
      useCurrent: false 
     }); 

     //Setting the range of dates 
     $("#startdate").on("dp.change", function (e) { 
      $('#enddate').data("DateTimePicker").minDate(e.date); 
     }); 
     $("#enddate").on("dp.change", function (e) { 
      $('#startdate').data("DateTimePicker").maxDate(e.date); 
      $('#thirddate').data("DateTimePicker").minDate(e.date); //Added this 
     }); 

     /* Remove this */ 

     //Setting a third date in the future after the range 
     //$("#thirddate").on("dp.change", function (e) { 
     // $('#enddate').data("DateTimePicker").minDate(e.date); 
     //}); 
    }) 
</script> 
関連する問題