时间戳

首页 > 解决方案 > Boostrap 日期选择器日期为各种选项打开

jquery - Boostrap 日期选择器日期为各种选项打开

问题描述

我正在使用 Bootstrap 日期选择器。我有一个下拉菜单（ddinterval），其中包含三个选项“选择”、“每周”和“每月”。我有一个日期选择器日历的文本框。要求，在选择“每周”选项时，日期选择器应该有一个正常的日历，在选择“每月”选项时，日期选择器应该有一个日历，整个月只启用第 1 天到第 28 天。我尝试了下面的代码，但输出不一致。这整个功能都在引导奖牌弹出窗口中。

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

标签： jquerybootstrap-datepicker

解决方案

这是工作代码：

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

使用的引导程序是：

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

推荐阅读