jquery - 样式日期选择器 : highlight specific dates

Question

我知道之前有人问过这个问题，到目前为止我找到的“解决方案”似乎不起作用。

我在我的 wordpress 网站上使用 Contact Form 7 和 datepicker 插件。联系表格和日历工作正常，但我希望能够通过更改这些日期的背景颜色来突出显示特定日期。

这是我包含在头文件中的代码:

<script type="text/javascript">
  $(document).ready(function() {
    var SelectedDates = {};
    SelectedDates[new Date('07/26/2016')] = new Date('07/26/2016');
    $('#datepicker123').datepicker({
      beforeShowDay: function(date) {
        var Highlight = SelectedDates[date];
        if (Highlight) {
          return [true, "Highlighted", Highlight];
        }
        else {
          return [true, '', ''];
        }
      }
    });
  });
</script>

在我的 style.css 表中，我包含了以下代码以将样式添加到这些日期:

.Highlighted a{
   background-color : #1AAFFF !important;
}

但是，当我单击日历但显示标准样式时，此示例中的日期 (7/26/2016) 不会突出显示。我的错误在哪里？

非常感谢您的帮助!

编辑:HTML 代码似乎超长所以这里是网站链接:KYTE

编辑 2:所以我将以下代码添加到我的 functions.php 文件中:

function wpse_enqueue_datepicker() {
  // Load the datepicker script (pre-registered in WordPress).
  wp_enqueue_script( 'jquery-ui-datepicker' );

  // You need styling for the datepicker.
  // For simplicity I've linked to Google's hosted jQuery UI CSS.
  wp_register_style( 'jquery-ui', 'http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css' );
  wp_enqueue_style( 'jquery-ui' );  
}

add_action( 'wp_enqueue_scripts', 'wpse_enqueue_datepicker' );

还是不行。

Answer 1

我认为您没有将突出显示的类(class)设置为所选日期。 尝试

$('td').on('click', function(){
    $('td.Highlighted').removeClass('Highlighted');
    $(this).addClass('Highlighted');
});

这对你有帮助 并更改您的 CSS:

tr.Highlighted {
     background-color:red;
}

我测试过