JavaScript onchange 更新变量值

Question

感谢您阅读本文。我有一个带有日期选择器日历的输入，它有 minDays 和 MaxDays 的变量，允许用户 select 一定天数。我有一个 html 表单，让用户可以选择 select 他们想住多少晚，所以在 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>

我用来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，这是我需要从 select 框中更新到新值的值。

任何帮助将不胜感激，我的 javascript 不太好。

非常感谢舒卡

Answer 1

每当 select-box 值发生变化时，您可以使用 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>

JavaScript onchange 更新变量值

JavaScript onchange update variable value

html

javascript

php

ajax

onchange