JavaScript onchange update variable value

Question

Thank you for looking at this. I have an input that has a datepicker calendar, and it has variables for minDays and MaxDays, allowing the user to select a certain amount of days. I have a html form that gives the user the option to select how may nights they want to stay, so on the onChange I want it to update the maxDays to the new value.

<select id="nights" name="nights" class="form-control">
    <option selected disabled>Select Nights</option>
    <option value="4">3 Nights</option>
    <option value="5">4 Nights</option>
    <option value="8">7 Nights</option>
</select>

The javascript that I am using to select up the calendar is below

<script>
var dateToday = new Date();
var exclude = ["23-06-2021"]
var picker = new Lightpick({
    format: 'DD-MM-YYYY',
    field: document.getElementById('startdate'),
    secondField: document.getElementById('enddate'),
    singleDate: false,
    minDays: 4,
    maxDays: 8,
    numberOfColumns: 3,
    numberOfMonths: 3,
    selectForward: true,
    minDate: dateToday,
    disableDates: exclude,
    //disableWeekends:true,
    onSelect: function(start, end){
        var str = '';
        str += start ? start.format('Do MMMM YYYY') + ' to ' : '';
        str += end ? end.format('Do MMMM YYYY') : '...';
        document.getElementById('result-3').innerHTML = str;
    }
});

I have set the default value of 'maxDays' to 8, and this is the value I need to update to the new alue from the select box.

Any help would be mostly appreciated, I am not that well up on my javascript.

Many thanks Shuka

Answer 1

You can use picker.reloadOptions({"maxDays": value }) to update your maxDays inside picker whenever select-box value gets change.

Demo Code :

var dateToday = new Date()
var exclude = ["23-06-2021"]
var picker = new Lightpick({
  format: 'DD-MM-YYYY',
  field: document.getElementById('startdate'),
  secondField: document.getElementById('enddate'),
  singleDate: false,
  minDays: 4,
  maxDays: 8,
  numberOfColumns: 3,
  numberOfMonths: 3,
  selectForward: true,
  minDate: dateToday,
  disableDates: exclude,
  onSelect: function(start, end) {
    var str = '';
    str += start ? start.format('Do MMMM YYYY') + ' to ' : '';
    str += end ? end.format('Do MMMM YYYY') : '...';
    document.getElementById('result-3').innerHTML = str;
  }
});

function myFunction(value) {
  //use this 
  picker.reloadOptions({
    "maxDays": value //set new value
  })
}

<link rel="stylesheet" type="text/css" href="https://unpkg.com/lightpick@latest/css/lightpick.css">

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/lightpick@latest/lightpick.js"></script>
<select id="nights" name="nights" class="form-control" onchange="myFunction(this.value)">
  <option selected disabled>Select Nights</option>
  <option value="4">3 Nights</option>
  <option value="5">4 Nights</option>
  <option value="8">7 Nights</option>
</select>

<input type="text" id="startdate" placeholder="Start">
<input type="text" id="enddate" placeholder="End">

<div id="result-3"></div>