Question

我的表单中有三个<input>元素。

<input id="from-date" type="text" class="form-control" placeholder="From">
<input id="to-date" type="text" class="form-control" placeholder="To">
<input id="total" class="form-control" placeholder="Total no. of days">

其中第一个和第二个接受从 Bootstrap Datepicker 中选择的日期，最后一个显示总天数。

计算总天数，不包括周末（周六和周日）。我现在想要实现一种功能，当我使用datesDisabled选项禁用一组日期时，这些禁用日期不应计入总数。天。如何检查Bootstrap Datepicker中是否禁用了日期？

以下是我的代码的快速JS Fiddle。

以下是我的JS。

$(function() {
            var date = new Date();
            var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
            var end = new Date(date.getFullYear(), date.getMonth(), date.getDate());

            // create the from date
            $('#from-date').datepicker({
                autoclose: true,
                format: 'dd-mm-yyyy',
                startDate: today,
                daysOfWeekDisabled: [0,6],
                datesDisabled:["12-04-2018","17-04-2018","19-04-2018"],
            }).on('changeDate', function(ev) {
                ConfigureToDate();
            });


            $('#to-date').datepicker({
                autoclose: true,
                format: 'dd-mm-yyyy',
                daysOfWeekDisabled: [0,6],
                datesDisabled:["12-04-2018","17-04-2018","19-04-2018"],
                startDate: $('#from-date').val()
            }).on('changeDate', function(ev) {
                var fromDate = $('#from-date').data('datepicker').dates[0];
                var get_no_of_days = getWorkingDatesCount(fromDate, ev.date);
                var final_count = parseInt(get_no_of_days) + 1;//adding +1 to the total number of days to count the present date as well.
                $('#total').val(final_count);
            });

            // Set the min date on page load
            ConfigureToDate();

            // Resets the min date of the return date
            function ConfigureToDate() {
                $('#to-date').val("").datepicker("update");
                $('#to-date').datepicker('setStartDate', $('#from-date').val());
            }
        });

        function getWorkingDatesCount(startDate, endDate) {
            var count = 0;
            var curDate = new Date(startDate);
            while (curDate <= endDate) {
                var dayOfWeek = curDate.getDay();
                if ( !((dayOfWeek == 6) || (dayOfWeek == 0)) )
                count++;
                curDate.setDate(curDate.getDate() + 1);
            }
            return count;
        }

如果有人能帮助我，那将会有很大的帮助。

Answer 1

工作示例：https://jsfiddle.net/cCrul/qLt6k0yv/

我刚刚将datesDisables声明为变量：

var datesDisabled = ["12-04-2018", "17-04-2018", "19-04-2018"];

我在执行curDate之前使用它来检查该数组中是否有count++：

if (
    !((dayOfWeek == 6) || (dayOfWeek == 0)) &&
    (datesDisabled.indexOf(formatDate(curDate)) == -1)
) {
    count++;
}

jsfiddle代码中定义的

formatDate()函数。

＆＃13;

$(function() {
  var date = new Date();
  var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
  var end = new Date(date.getFullYear(), date.getMonth(), date.getDate());

  var datesDisabled = ["12-04-2018", "17-04-2018", "19-04-2018"];
  // create the from date
  $('#from-date').datepicker({
    autoclose: true,
    format: 'dd-mm-yyyy',
    startDate: today,
    daysOfWeekDisabled: [0, 6],
    datesDisabled: datesDisabled,
  }).on('changeDate', function(ev) {
    ConfigureToDate();
  });


  $('#to-date').datepicker({
    autoclose: true,
    format: 'dd-mm-yyyy',
    daysOfWeekDisabled: [0, 6],
    datesDisabled: datesDisabled,
    startDate: $('#from-date').val()
  }).on('changeDate', function(ev) {
    var fromDate = $('#from-date').data('datepicker').dates[0];
    var get_no_of_days = getWorkingDatesCount(fromDate, ev.date);
    var final_count = parseInt(get_no_of_days) + 1; //adding +1 to the total number of days to count the present date as well.
    $('#total').val(final_count);
  });

  // Set the min date on page load
  ConfigureToDate();

  // Resets the min date of the return date
  function ConfigureToDate() {
    $('#to-date').val("").datepicker("update");
    $('#to-date').datepicker('setStartDate', $('#from-date').val());
  }

  function getWorkingDatesCount(startDate, endDate) {
    var count = 0;
    var curDate = new Date(startDate);
    while (curDate <= endDate) {
      var dayOfWeek = curDate.getDay();
      if (!((dayOfWeek == 6) || (dayOfWeek == 0)) && (datesDisabled.indexOf(formatDate(curDate)) == -1)) {
        console.log(formatDate(curDate));
        count++;
      }
      curDate.setDate(curDate.getDate() + 1);
    }
    return count;
  }

  function formatDate(date) {
    var d = new Date(date),
      month = '' + (d.getMonth() + 1),
      day = '' + d.getDate(),
      year = d.getFullYear();

    if (month.length < 2) month = '0' + month;
    if (day.length < 2) day = '0' + day;

    return [day, month, year].join('-');
  }
});

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.standalone.min.css" rel="stylesheet" />
<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.6.4/js/bootstrap-datepicker.min.js"></script>


<input id="from-date" type="text" class="form-control" placeholder="From">
<input id="to-date" type="text" class="form-control" placeholder="To">
<input id="total" class="form-control" placeholder="Total no. of days">

＆＃13;

如何在Bootstrap Datepicker中检查日期是否被禁用？

1 个答案: