Bootstrap datepicker日期为各种选项打开

Question

我正在使用 Bootstrap 日期选择器。我有一个带有三个选项 'Select'、'Weekly' 和 'Monthly' 的下拉列表 (ddinterval)。我有一个日期选择器日历的文本框。在要求中，在选择 'Weekly' 选项时，日期选择器应该有一个正常的日历，在选择 'Monthly' 选项时，日期选择器应该有一个日历，只为所有 month.I 尝试下面的代码启用第 1 到 28 天但输出不一致。整个功能都在 bootstrap 勋章弹出窗口中。

$(document).ready(function(e) {
  var dates_avail = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28];

  function isAvailable(date) {
    var dt = date.getDate();
    if (dates_avail.indexOf(parseInt(dt)) != -1) {
      return true;
    } else {
      return false;
    }
  }

  $('.ddinterval').on('change', function(e) {
    $(".dpstartdatefrom").datepicker("destroy");
    if ($('.ddinterval').val() == "Monthly") {
      $('.dpstartdatefrom').datepicker({
        format: 'dd/mm/yyyy',
        beforeShowDay: isAvailable
      }).on('changeDate', function() {
        $(this).datepicker('hide');
      });
    } else if ($('.ddinterval').val() == "Weekly") {
      $('.dpstartdatefrom').datepicker({
        format: 'dd/mm/yyyy'
      }).on('changeDate', function() {
        $(this).datepicker('hide');
      });
    } else {
      $('.dpstartdatefrom').datepicker({
        format: 'dd/mm/yyyy'
      });
    }
  });
});

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

<select class="form-control cmbcrinterval ddinterval" id="cmbcrinterval" name="cmbcrinterval">
  <option value="">Select</option>
  <option value="Weekly" >Weekly</option>
  <option value="Monthly" >Monthly</option>
</select>

<input type="text" readonly="true" class="form-control datePicker dpstartdatefrom" id="txtstartdatefrom" name="txtstartdatefrom">

Answer 1

这是工作代码：

https://codepen.io/creativedev/pen/eKpVdR

而Bootstrap使用的是：

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

Bootstrap datepicker日期为各种选项打开

Boostrap datepicker date open for various option

jquery

bootstrap-datepicker