Question

我正在使用Bootstrap datepicker。我有一个下拉（ddinterval），有三个选项＆＃39; Select＆＃39;＆＃39; Weekly＆＃39;和＆＃39;每月＆＃39;。我有一个datepicker日历文本框。在要求中，选择“周刊”＆＃39;选项，datepicker应该有一个普通的日历，并选择＆＃39;每月＆＃39;选项，datepicker应该有一个日历，只有第1天到第28天启用所有月份。我试过下面的代码，但输出不一致。整个功能都在bootstrap奖牌弹出窗口中。

＆＃13;

$(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'
      });
    }
  });
});

＆＃13;

<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">

＆＃13;

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

Boostrap datepicker日期开放各种选项

1 个答案: