settings daterange with pikaday datepicker

Question

I have a booking form and I need just two input #checkin and #checkout and that is why I have used datepicker with daterange everything is going ok almost one thing is how can I choose just 15 day between two date ?

by the way I'm using Pikaday datepicker

$(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: function() {
        e = this.getDate();
      },
      onSelect: whenClosed
    });
  }

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

});

 body {
            padding: 30px;
        }
        input,
        select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
        }

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




  <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" id="checkin" />
      </div>
      <div class="col-lg-3 col-md-3 col-sm-3">

          <input type="text"  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/pikaday/1.5.1/pikaday.min.js"></script>

  <script src="https://cdn.anitur.com.tr/example/flexdatalist/flexdatalist.js"></script>

if you can check it out on codepen instead of stackoverflow snippet

Brother Woodrow · Accepted Answer · 2017-02-22T09:07:52.877

You could save a reference to the checkout picker, then bind a function to the checkin picker's onSelect method and adjust the checkout datepicker accordingly. You could (and probably should) load Moment.js to make date calculations a lot easier. The format property of Pikaday (which you're using) won't even work without it.

$(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()); // min date of checkout = checkin
    checkoutPicker.setDate(null);
    $('#checkout').trigger("click"); // trigger checkout picker
  });

});

http://codepen.io/anon/pen/apgGpN

I guess the problem it's about getMoment and I don't want to getmoment.js is there any way to do without moment.js? — ani_css, Feb 20 '17 at 10:27
Just add `$('#checkout').trigger("click");` to the checkin picker callback function. And sure, you don't have to use Moment.js, see [here](http://stackoverflow.com/questions/563406/add-days-to-javascript-date) for example. But there are a lot of things to take into account when working with dates in JS (daylight savings, leap years, time zones, etc.) and Moment takes care of everything. It makes life much easier, so I would recommend you do use it. — Brother Woodrow, Feb 20 '17 at 19:48
thanks.. where shall I putt in `$('#checkout').trigger("click");` code ? how can I wrote callback of `#checkin` ? thanks by the way — ani_css, Feb 22 '17 at 07:03

settings daterange with pikaday datepicker

1 Answers1