如何在 JQuery datepicker 中设置选定日期范围内的第一个和最后一个元素的样式？

Question

我无法解决一件事，如何在 JQuery UI Datepicker 中设置所选日期范围的第一个和最后一个元素的样式？我有代码：

 $(document).ready(function() {
        // jquery datepicker settings
        $(function() {
            $("#datepicker").datepicker({
                numberOfMonths: 3,
                showButtonPanel: false,
                minDate: 0,
                beforeShowDay: function(date) {
                    var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $('#start-date').val());
                    var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $('#end-date').val());
                    if (date >= date1 && date <= date2) {
                        return [true, 'ui-state-selected-range', ''];
                    }
                    return [true, '', ''];
                },
                onSelect: function(dateText, inst) {
                    var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $('#start-date').val());
                    var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $('#end-date').val());
                    if (!date1 || date2) {
                        $('#start-date').val(dateText);
                        $('.start-date-visible').text(dateText);
                        $('#end-date').val('');
                        $('.end-date-visible').text('');
                        $(this).datepicker('option', dateText);
                    } else {
                        $('.end-date-visible').text(dateText);
                        $('#end-date').val(dateText);
                        $(this).datepicker('option', null);
                    }
                }
            });
        });
    });

td.ui-state-selected-range { 
  border: none !important; 
  padding: 1px 0 1px 0 !important; 
  background: none !important; 
  overflow:hidden; 
}
td.ui-state-selected-range a { 
  background-color: #f8c3b1; 
  border: 1px solid #f29676 !important; 
  border-right: none !important; 
  border-left: none !important; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<input type="text" id="start-date" style="visibility: hidden">
<input type="text" id="end-date" style="visibility: hidden">
<div class="start-date-visible"></div>
<div class="end-date-visible"></div>
<div id="datepicker"></div>

我需要为第一个和最后一个选定元素以及它们之间的元素设置样式，它应该如下所示：

我不知道该怎么做，希望您能帮忙！

Answer 1

您可以在beforeShowDay 中检查date 是否是开始和结束日期，然后应用您的CSS。

if (date1 && date2 && date && (date1.getTime() == date.getTime() || date2.getTime() == date.getTime())) {
          return [true, 'ui-red', ''];
        }

我添加了 ui-red 开始和结束日的课程。

$(document).ready(function() {
  // jquery datepicker settings
  $(function() {
    $("#datepicker").datepicker({
      numberOfMonths: 3,
      showButtonPanel: false,
      minDate: 0,
      beforeShowDay: function(date) {

        var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $('#start-date').val());
        var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $('#end-date').val());
        if (date1 && date && (date1.getTime() == date.getTime())) {
          return [true, 'ui-red-start', ''];
        }
        if (date2 && date && (date2.getTime() == date.getTime())) {
          return [true, 'ui-red-end', ''];
        }

        if (date >= date1 && date <= date2) {
          return [true, 'ui-state-selected-range', ''];
        }
        var d = date.getTime();

        return [true, '', ''];
      },
      onSelect: function(dateText, inst) {
        var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $('#start-date').val());
        var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $('#end-date').val());
        if (!date1 || date2) {
          $('#start-date').val(dateText);
          $('.start-date-visible').text(dateText);
          $('#end-date').val('');
          $('.end-date-visible').text('');
          $(this).datepicker('option', dateText);
        } else {
          if (new Date(dateText) < date1) {
            var sDate = $('#start-date').val();
            $('.start-date-visible').text(dateText);
            $('#start-date').val(dateText);
            $(this).datepicker('option', null);

            $('.end-date-visible').text(sDate);
            $('#end-date').val(sDate);

          } else {
            $('.end-date-visible').text(dateText);
            $('#end-date').val(dateText);
            $(this).datepicker('option', null);
          }
        }
      }
    });
  });
});

td.ui-state-selected-range a {
  background: none !important;
  border: none !important;
}

td {
  width: 40px;
  height: 40px;
}

td a {
  text-align: center !important;
}

.ui-red-start {
  background: #F29676;
  border-radius: 50% 0 0 50%;
}

.ui-red-end {
  background: #F29676;
  border-radius: 0 50% 50% 0;
}

.ui-red-start .ui-state-default,
.ui-red-end .ui-state-default {
  border: none !important;
  ;
  background: none !important;
  ;
  font-weight: normal;
  color: #454545 !important;
  ;
}

.ui-state-selected-range {
  border: none !important;
  font-weight: normal;
  background: #f8c3b1 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">


<input type="text" id="start-date" style="visibility: hidden">
<input type="text" id="end-date" style="visibility: hidden">
<div class="start-date-visible"></div>
<div class="end-date-visible"></div>
<div id="datepicker"></div>