JavaScript onchange 更新变量值

Question

感谢您查看此内容。 我有一个输入，它有一个日期选择器日历，它有 minDays 和 MaxDays 的变量，允许用户选择一定数量的天。我有一个 html 表单，让用户可以选择他们想住多少晚，所以在 onChange 上，我希望它将 maxDays 更新为新值。

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

我用来选择日历的javascript如下

<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;
    }
});

我已将“maxDays”的默认值设置为 8，这是我需要从选择框中更新为新值的值。

任何帮助将不胜感激，我对我的 javascript 不太了解。

非常感谢 舒卡

Answer 1

您可以在选择框值变更时使用picker.reloadOptions({"maxDays": value })更新maxDays内部选择器。

演示代码：

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>