Как проверить, отключена ли дата в Bootstrap Datepicker?

У меня есть три элемента <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;
        }

Если кто-нибудь может помочь мне с этим, это будет очень полезно.


person Vinodh K    schedule 15.04.2018    source источник


Ответы (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++;
}

formatDate() функция, определенная в коде jsfiddle.

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

person raul.vila    schedule 15.04.2018
comment
Идеальный! Спасибо за решение @raul.vila - person Vinodh K; 16.04.2018