Question

我要根据选择条件禁用日期选择器中的日期。

我有一个表单，其中有两个表单输入，第一个是下拉菜单，第二个是日期选择器，下拉菜单中有两个条件，第一个是小条件，第二个是中等条件。

如果用户从下拉菜单中选择小号，则日期选择器将显示当前日期的日期，如果用户从下拉菜单中选择介质，则日期将显示当前日期的+2。前一个日期的其余部分被禁用，即将到来的日期在日期选择器中可见。

有可能吗？如果是，那么请给我们一些有关如何在日期选择器功能中设置条件的想法。

Answer 1

您可以在select的change事件上更新日期选择器。为此，请使用setStartDate选项更新日期选择器。

$(document).ready(function(){

  $('#date').datepicker({
    format: "dd-mm-yyyy",
    startDate: "today",
    autoclose: true,
    todayHighlight: true,
    daysOfWeekDisabled: "0,6"
  });

});


$(document).on('change','.option',function(){
  $selectedVal = $(this).val();

  if($selectedVal == 'small'){
    $('#date').val('');
    $('#date').datepicker('setStartDate','today');
  }
  else{
    $('#date').val('');
    $('#date').datepicker('setStartDate','+2d');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet"/>

<select class="option">
  <option value="small">Small</option>
  <option value="medium">Medium</option>
 </select>
 
 <input type="text" id="date" >

在选择选项

1 个答案: