selectタグを使用してdatepickerを変更するには

Question

selectタグを使用してdatepickerを変更したいと思います。私は14日にホテルに1泊だけ宿泊し、15日には自動的にチェックアウトします。自動チェックアウトの日付を変更するには既にできます..しかし、もし私が選択タグを使用して自動チェックアウト日付のホテルを変更することは可能ですか？たとえば2泊を選択した場合、チェックアウト日は16日になります

私がjsfiddleで提供したコードは、事前に

おかげ

例：https://jsfiddle.net/devefrontend/vaqdsmjk/7/

$(document).ready(function() { 
 

 
     $("#dateStart").datepicker({ 
 
     dateFormat: "dd-M-yy", 
 
     minDate: 'dateToday', 
 
     onSelect: function(date) { 
 
      var date2 = $('#dateStart').datepicker('getDate'); 
 
      date2.setDate(date2.getDate() + 1); 
 
      $('#dateEnd').datepicker('setDate', date2); 
 
      //sets minDate to dt1 date + 1 
 
      $('#dateEnd').datepicker('option', 'minDate', date2); 
 
     } 
 
     }).datepicker("setDate", new Date()); 
 
     $('#dateEnd').datepicker({ 
 
     dateFormat: "dd-M-yy", 
 
     minDate: 1, 
 
     onClose: function() { 
 
      var dt1 = $('#dateStart').datepicker('getDate'); 
 
      console.log(dt1); 
 
      var dt2 = $('#dateEnd').datepicker('getDate'); 
 
      if (dt2 <= dt1) { 
 
      var minDate = $('#dateEnd').datepicker('option', 'minDate'); 
 
      $('#dateEnd').datepicker('setDate', minDate); 
 
      } 
 
     } 
 
     }).datepicker("setDate", new Date()); 
 

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<label for="">start</label> 
 
<input type="text" class="form-control" id="dateStart" name="start"> 
 
<label for="">end</label> 
 
<input type="text" class="form-control" id="dateEnd" name="end"> 
 
<label for="">night</label> 
 
<select name="night" id="night" class="form-control passenger"> 
 
    <option selected="selected">1 night</option> 
 
    <option>2 night</option> 
 
    <option>3 night</option> 
 
    <option>4 night</option> 
 
    <option>5 night</option> 
 
    <option>6 night</option> 
 
    <option>7 night</option> 
 
    <option>8 night</option> 
 
</select>

Answer 1

は#dateStartのonSelectからすべてを抽出し、関数にそれを変換します。そこD ...しかし：これは素晴らしいですありがとう

function populateEndDate() { 
 
    var date2 = $('#dateStart').datepicker('getDate'); 
 
    date2.setDate(date2.getDate() + parseInt($("#night").val())); 
 
    $('#dateEnd').datepicker('setDate', date2); 
 
} 
 

 
$(document).ready(function() { 
 

 
    $("#dateStart").datepicker({ 
 
    dateFormat: "dd-M-yy", 
 
    minDate: 'dateToday', 
 
    onSelect: function(date) { 
 
     populateEndDate(); 
 
    } 
 
    }).datepicker("setDate", new Date()); 
 
    $('#dateEnd').datepicker({ 
 
    dateFormat: "dd-M-yy", 
 
    minDate: 1, 
 
    onClose: function() { 
 
     var dt1 = $('#dateStart').datepicker('getDate'); 
 
     console.log(dt1); 
 
     var dt2 = $('#dateEnd').datepicker('getDate'); 
 
     if (dt2 <= dt1) { 
 
     var minDate = $('#dateEnd').datepicker('option', 'minDate'); 
 
     $('#dateEnd').datepicker('setDate', minDate); 
 
     } 
 
    } 
 
    }).datepicker("setDate", new Date()); 
 

 
}); 
 

 
$("#night").on('change', function() { 
 
    populateEndDate(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<label for="">start</label> 
 
<input type="text" class="form-control" id="dateStart" name="start"> 
 
<label for="">end</label> 
 
<input type="text" class="form-control" id="dateEnd" name="end"> 
 
<label for="">night</label> 
 
<select name="night" id="night" class="form-control passenger"> 
 
    <option selected="selected" value=1>1 night</option> 
 
    <option value=2>2 night</option> 
 
    <option value=3>3 night</option> 
 
    <option value=4>4 night</option> 
 
    <option value=5>5 night</option> 
 
    <option value=6>6 night</option> 
 
    <option value=7>7 night</option> 
 
    <option value=8>8 night</option> 
 
</select>