首页 > 解决方案 > 日期选择器中突出显示日期的问题

问题描述

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

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>

标签: javascriptjquerycssdatepicker

解决方案


您还可以$.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>


推荐阅读