如何通过 select 标签更改日期选择器

Question

我想使用 select 标签更改日期选择器。例如，我在 14 日只在酒店住了一晚，并在 15 日自动退房。已经可以更改自动结账日期了。但是如果我使用 select 标签更改酒店的自动结账日期是否可能？例如，如果我 select 两晚，那么结账日期将变为第 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 中提取所有内容并将其转换为函数。在更改 select 时调用此函数，而不是硬编码添加 1 晚，而是使用下拉列表中的值 selected：

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>

如何通过 select 标签更改日期选择器

How to change datepicker via select tag

javascript

jquery

html-select

datepicker