How to apply date range?

The example is my booking form but it's not date range and it is a Pikaday datepicker plugin and I want to make it date-range and I find out example but didn't work

and here is my codes

$(document).ready(function() {

  $('.flexdatalist').flexdatalist({
    minLength: 0,
    searchContain: true,
  }).on('select:flexdatalist', function() {
    $('#checkin').trigger("click");
  });

  assignPicker = function(id, whenClosed) {
    if (typeof whenClosed !== 'function') {
      whenClosed = null;
    }

    return new Pikaday({
      numberOfMonths: 2,
      field: document.getElementById(id),
      format: "DD.MM.YYYY",
      minDate: new Date(),
      firstDay: 1,
      maxDate: new Date(2020, 12, 31),
      onSelect: whenClosed
    });
  }

  var checkoutPicker = assignPicker('checkout', function() {
    $('#select').trigger("click");
  });

  var checkinPicker = assignPicker('checkin', function() {
    var maxDate = this.getMoment().add(15, 'days');
    checkoutPicker.setMaxDate(maxDate.toDate());
    checkoutPicker.setMinDate(this.getDate());
    checkoutPicker.setDate(null);
  });

});
 body {
     padding: 30px;
 }
 input, select {
     width: 100%;
     padding: 10px;
     border: 1px solid #ccc;
 }
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.5.1/css/pikaday.min.css" />
  <link rel="stylesheet" href="https://cdn.anitur.com.tr/example/flexdatalist/flexdatalist.css" />
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-lg-3 col-md-3 col-sm-3">
        <input type="text" name="" class='flexdatalist' data-min-length='1' list='languages' name='language' />
        <datalist id="languages">
          <option value="PHP">PHP</option>
          <option value="JavaScript">JavaScript</option>
          <option value="Cobol">Cobol</option>
          <option value="C#">C#</option>
          <option value="C++">C++</option>
          <option value="Java">Java</option>
          <option value="Pascal">Pascal</option>
          <option value="FORTRAN">FORTRAN</option>
          <option value="Lisp">Lisp</option>
          <option value="Swift">Swift</option>
          <option value="ActionScript">ActionScript</option>
        </datalist>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-3">
          <input type="text" class="checkin" id="checkin" />
      </div>
      <div class="col-lg-3 col-md-3 col-sm-3">

          <input type="text" class="checkout" id="checkout" />
      </div>
      <div class="col-lg-3 col-md-3 col-sm-3">
<form action="" method="get">
        <select name="select" id="select">
          <option value="0">Choose</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
        </select>
      </form>
      </div>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.5.1/pikaday.min.js"></script>
  <script src="https://cdn.anitur.com.tr/example/flexdatalist/flexdatalist.js"></script>
</body>
</html>

click to see on codepen

Answers 1

  • Okay, So you are making a mistake in the picker.

    As I see you are passing the id in your assignPicker and in between your further two functions startPicker and endPicker are inheriting the values passed in the id.

    Which is causing the conflict, as whenever startPicker or endPicker is called, both get the id of the same dom object as var id (passed in the assignPicker) is common for both startPicker or endPicker.

    You need to separate them or just simply assign the id directly instead of passing it as an argument and fetching it inside the function.

    startPicker = new Pikaday({
            numberOfMonths: 2,
            field: document.getElementById("checkin"),
            format: "DD.MM.YYYY",
            firstDay: 1,
            minDate: new Date(),
            maxDate: new Date(2020, 12, 31),
            onSelect: function() {
                startDate = this.getDate();
                updateStartDate();
            }
        }),
        endPicker = new Pikaday({
            field: document.getElementById("checkout"),
            minDate: new Date(),
            maxDate: new Date(2020, 12, 31),
            onSelect: function() {
                endDate = this.getDate();
                updateEndDate();
            }
        }),
    

    That will fix the range for you.

    Here's the updated codepen


Related Articles