如何通过输入 onchange 更改多日期属性

Question

我正在尝试选择多日期选择器 Bootstrap。我的条件是获取 onchange 值以将多日期属性设置为输入。

例如，如果 onchange 值为 2，我只能选择 2 个日期。如果 onchange 值为 3，我最多可以选择三个日期。默认是 2 我可以选择。

我试过这段代码，但只接受默认声明

$("#Txt_Date").datepicker({
  format: 'd-mm-yyyy',
  inline: false,
  lang: 'en',
  step: 2,
  multidate: 2,
  closeOnDateSelect: true,
  onSelect: function(dateText, inst) {
    $(this).change();
  }
});

$('#numdays').change(function(argument) {
  alert($(this).val());
  var numdays = $(this).val();
  if (numdays == 2) {
    $("#Txt_Date").datepicker({
      format: 'd-mm-yyyy',
      inline: false,
      lang: 'en',
      step: 2,
      multidate: numdays,
      closeOnDateSelect: true
    });
  } else if (numdays == 3) {
    $("#Txt_Date").datepicker({
      format: 'd-mm-yyyy',
      inline: false,
      lang: 'en',
      step: 2,
      multidate: numdays,
      closeOnDateSelect: true
    });
  } else {
    $("#Txt_Date").datepicker({
      format: 'd-mm-yyyy',
      inline: false,
      lang: 'en',
      step: numdays,
      multidate: 5,
      closeOnDateSelect: true
    });
  }
});

Answer 1

尝试使用下一个代码：

mul_dp();

$('#numdays').change(function() {
    $("#Txt_Date").datepicker('setDate', null); 
    mul_dp(Number($(this).val())); 
});

function mul_dp(num_days = 2){

  $('#numdays').val(num_days);

  $("#Txt_Date").datepicker('destroy').datepicker({
  format: 'd-mm-yyyy',
  inline: false,
  lang: 'en',
  step: num_days,
  multidate: num_days,
  closeOnDateSelect: true,
  onSelect: function(dateText, inst) {
      $(this).change();
    }
  });
}

#Txt_Date{
  width: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css">
<input id="Txt_Date">

<select id="numdays">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>