How to create date range day interval for datepicker?

Question

I'm using Pikaday Plugin and I created booking form as I want and in my opinion it's great for now except one issue.

there is a date range function I set 15 day for between two input date if you click this link you will see

and I have same form with auto next focus but I couldn't apply my date-range function for 15 days how can I apply it my code which is in below

and by the way this is my auto next form link

function getMaxDate(element){
  if(element.id=='checkout')
    return new Date(new Date(element.parentNode.querySelector('#checkin').value).getTime()+(15*24*60*60*1000));
else
  return new Date(2020, 12, 31);
  }
function getMinDate(element){
  if(element.id=='checkout')
    return new Date(element.parentNode.querySelector('#checkin').value);
  else
  return new Date();
  }

Bharat · Accepted Answer

You can check below code, how we can validate date in 15 days range. you were trying to validate checkout date on load time, so he dint getting checkin date that's why its was not working.

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

  assignPicker('checkin', function() {

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


});
function getMaxDate(id){
  if(id=='checkout')
    return new Date(new Date($('#checkin').val()).getTime()+(15*24*60*60*1000));
else
  return new Date(2020, 12, 31);
  }

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

How to create date range day interval for datepicker?

Answers (1)

Related Questions