конец диапазона дат js-datepicker в зависимости от начала

Question

Я использую этот DatePicker https://www.npmjs.com/package/js-datepicker и он работает по большей части. Однако я хотел бы, чтобы даты начала и окончания второй даты основывались на том, что выбрано в дате начала.

HTML:

    <input type="text" name="message[dateStart][]" class='date date-start' placeholder="Start Date">

    <input type="text" name="message[dateEnd][]" class='date date-end' placeholder="End Date">  

текущий JavaScript

// set date to 2 weeks from now calculated in milliseconds
var afterTwoWeeks = new Date(+new Date + 1209600000);

var pickerEnStart = datepicker('.date-start', {
  // dateSelected: new Date(2099, 0, 5)
  minDate: new Date(afterTwoWeeks),
  startDate: new Date(afterTwoWeeks),
  noWeekends: true,
  formatter: (input, date, instance) => {
    const value = date.toLocaleDateString()
    input.value = value // => '1/1/2099'
  }
})


var pickerEnEnd = datepicker('.date-end', {
  // dateSelected: new Date(2099, 0, 5)
  minDate: new Date(afterTwoWeeks),
  startDate: new Date(afterTwoWeeks),
  noWeekends: true,
  formatter: (input, date, instance) => {
    const value = date.toLocaleDateString()
    input.value = value // => '1/1/2099'
  }
})

Я попробовал пару вещей, но не смог получить конечную дату начала / окончания на основе выбранной даты начала.

Answer 1

Кажется, все работает так, как я ожидал.

HTML

   <input type="text" name="message[dateStart][]" class='date date-start' placeholder="Start Date">

   <input type="text" name="message[dateEnd][]" class='date date-end' placeholder="End Date">  

   <input type="button" id="reset" name="reset" value="Reset">

JS

var afterTwoWeeks = new Date(+new Date + 1209600000)

// none of this works well if we can't clear dates
var reset = document.getElementById('reset')
reset.onclick = function() {
  pickerEnStart.setDate()
  pickerEnEnd.setDate()
}

var pickerEnStart = datepicker('.date-start', {
  minDate: new Date(afterTwoWeeks),
  startDate: new Date(afterTwoWeeks),
  noWeekends: true,
  formatter: (input, date, instance) => {
    const value = date.toLocaleDateString()
    input.value = value 
  },
  id: 1,
  onSelect: (instance, date) => {
    // set the minimum date
    instance.setMin(date)
    // if end date not selected...
    if(!pickerEnEnd.dateSelected) { 
      // set the end date to force the calendar to display that month
      pickerEnEnd.setDate(new Date(date.getTime() + 1000*60*60*24), true)
      pickerEnEnd.firstTime = true
    }
  }
})

var pickerEnEnd = datepicker('.date-end', {
  minDate: new Date(afterTwoWeeks),
  startDate: new Date(afterTwoWeeks),
  noWeekends: true,
  formatter: (input, date, instance) => {
    const value = date.toLocaleDateString()
    input.value = value
  }, 
  id: 1,
  onSelect: (instance, date) => {
    instance.setMax(date)
  },
  onShow: function(instance) {
    // if this is the first time we're seeing this calendar...
    if (instance.firstTime) {
      // get rid of the end date we set to force it to this month
      instance.setDate();
      instance.firstTime = false;
    }
  },
})