CODEWITHSUNDEEP
javascriptjquerydatepickerhtml-select
frontend developer
frontend developer

Reputation: 41

How to change datepicker via select tag

I want to change the datepicker using select tag. for example I stay at the hotel only one night on the 14th and checkout automatically on the 15th. to change the auto checkout date already can .. but is it possible if i change the auto checkout date hotel by using select tag? for example if I select two nights then the checkout date becomes the 16th

The code I have provided in jsfiddle for example.

Thanks in advance

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

Upvotes: 0

Views: 1046

Answers (1)

Milan Chheda
Milan Chheda

Reputation: 8249

Extract everything from onSelect of #dateStart and convert that into a function. Call this function on change of the select and instead of hardcode addition of 1 night, you use the value selected from the dropdown: 

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>

Upvotes: 2

Related Questions