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

Posted 2023-05-08

【中文标题】如何通过输入 onchange 更改多日期属性

【英文标题】：How to change multidate attribute by input onchange

【发布时间】：2020-03-04 23:52:44

【问题描述】：

我正在尝试选择多日期选择器 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
    );
  
);

【参考方案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>
 

【讨论】：

非常感谢。这真的是我需要嵌入到我的概念中。很棒