Question

我想使用select标签更改datepicker。例如，我只在14日入住酒店，并在15日自动结账。更改自动结帐日期已经可以..但是如果我通过使用选择标签更改自动结账日期酒店是否可能？例如，如果我选择两晚，则结帐日期将变为第16天

我在jsfiddle中提供的代码，例如。

提前致谢

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

＆＃13;

    $(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());

    });

＆＃13;

<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>

＆＃13;

Answer 1

从onSelect的{{1}}中提取所有内容并将其转换为函数。在更改选择而不是硬编码添加1晚时调用此函数，您使用从下拉列表中选择的值：

＆＃13;

#dateStart

＆＃13;

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();
});

＆＃13;

如何通过select标签更改datepicker

1 个答案: