日期选择器中突出显示日期的问题答案

【问题标题】：Problem with highlight dates in datepicker日期选择器中突出显示日期的问题
【发布时间】：2020-09-17 10:02:08
【问题描述】：

我正在尝试使用已知代码突出显示日期，但我需要一些帮助，因为日期没有突出显示。

var highlightdate = ["2020-06-19", "2020-06-20", "2020-06-26", "2020-06-25", "2020-06-30"];
var date = new Date();
jQuery(document).ready(function() { 
    $( "#datepicker").datepicker({ 
        dateFormat: 'yy-mm-dd',
        beforeShowDay: function(date) {
            var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
            for (i = 0; i < highlightdate.length; i++) {
                if($.inArray(y + '-' + (m+1) + '-' + d,highlightdate) != -1) {
          
                    return [true, 'highlighdate', ''];
                }
            }
            return [true];

        }
    });
});

   .highlightdate {
       background-color: #ff0;
   }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
   <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">

      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
<div id="datepicker"></div>

【问题讨论】：

标签： javascript jquery css datepicker

【解决方案1】：

您也可以根据文档使用$.datepicker.formatDate( format, date, options )：https://api.jqueryui.com/datepicker/

示例代码。

jQuery(function($) {
  var dates = ["2020-06-19", "2020-06-20", "2020-06-26", "2020-06-25", "2020-06-30"];
  $("#datepicker").datepicker({
    dateFormat: 'yy-mm-dd',
    beforeShowDay: function(dt) {
      var dText = $.datepicker.formatDate("yy-mm-dd", dt);
      var result = [true, "", ""];
      if (dates.indexOf(dText) >= 0) {
        result = [true, 'ui-state-highlight', ''];
      }
      return result;
    }
  });
});

.ui-state-highlight>a.ui-state-default {
  background: #ffe45c;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="datepicker"></div>

【讨论】：

【解决方案2】：

您可以这样做：如果月份的值小于 10，则添加 0，因为您将 6 月 6 日作为 m 的值而不是 06。同时调整您在 @ 中的错字“highlighdate” 987654322@ 到“highlightdate”。

var highlightdate = ["2020-06-19", "2020-06-20", "2020-06-26", "2020-06-25", "2020-06-30"];
var date = new Date();
jQuery(document).ready(function() {
  $("#datepicker").datepicker({
    dateFormat: 'yy-mm-dd',
    beforeShowDay: function(date) {
      var m = date.getMonth(),
        d = date.getDate(),
        y = date.getFullYear();
      if (m < 10) {
        m = "0" + (m + 1);
      }
      else {
         m = m + 1
      }
      for (i = 0; i < highlightdate.length; i++) {
        if ($.inArray(y + '-' + m + '-' + d, highlightdate) != -1) {
          return [true, 'highlightdate', ''];
        }
      }
      return [true];

    }
  });
});

.highlightdate {
       background-color: #ff0;
   }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"rel = "stylesheet">
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<div id="datepicker"></div>

【讨论】：