样式化日期选择器：突出显示特定日期

Question

我知道这个问题之前已经被问过了，但是到目前为止，我发现的“解决方案”似乎都不起作用。

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

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

<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' );

仍然无法工作。

- Max Imilian

---

欢迎来到SO，你能给我们展示一下你的日期选择器的HTML代码吗？你可以右键点击日期选择器，然后选择"检查元素"并复制HTML代码。 - Pascal Goldbach

谢谢Pascal。我查看了HTML代码，似乎太长了无法在这里发布，所以我添加了一个链接到我的网站。希望这样可以，但如果不行请告诉我。 - Max Imilian

datepicker不是一个函数，prettyphoto也不是一个函数... - vaso123

是的，我也看到了（不用管prettyphoto那部分，那是一些我仍需要删除的旧代码）。但这是为什么呢？是因为WordPress datapicker插件使用了不同的函数名吗？ - Max Imilian

我已经在上面的代码中添加了实际日历弹出时的ID名称（'ui-datepicker-div'），但它仍然无法工作 :/ 抱歉，我完全是新手jscript，所以这些都是瞎猜。 - Max Imilian

Answer 1

我认为您没有将高亮类设置为所选日期。 请尝试：

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

这将会帮助你并改变你的CSS：

tr.Highlighted {
     background-color:red;
}

我已经测试过了

- Kavian Rabbani

---

谢谢，Kavian。尝试了你的方法，但还是没有成功。 - Max Imilian

很抱歉，它不行。问题在于datepicker未被识别为函数：$(...).datepicker不是一个函数 (index):424 Uncaught TypeError: $(...).prettyPhoto不是一个函数。我认为问题出在插件上。某处定义了datepicker函数，我需要找出它在哪里，以便我可以添加日期数组和showbeforedate函数。 - Max Imilian

Answer 2

您正在尝试在日期选择器库加载之前调用其方法。

请将此代码放入您的functions.php文件中。

<?php
  add_action( 'wp_footer', 'my_custom_js');
  function my_custom_js(){

   //Your js code goes here

  }
?>

- Shravan Sharma

---

我尝试将其添加到functions.php文件中（请参见我的原始文件中的上面代码），但没有成功。 - Max Imilian

Answer 3

我自己也很困惑和混淆，直到我把脚本放在页脚里。然后它就起作用了。我有独立的JS和CSS，可以帮助我在需要时排队它们。

function se_3852702_init() {
  // Place your own script in footer (see the last TRUE)
  wp_register_script( 'se_3852702',
    plugins_url( 'se_3852702' ) . DIRECTORY_SEPARATOR . 'se_3852702.js',
    [ 'jquery-ui-datepicker' ],
    FALSE,
    TRUE // <======== Place in the footer
  );

  wp_register_style( 'se_3852702', plugins_url( 'se_3852702' ) . DIRECTORY_SEPARATOR . 'se_3852702.css' );
}
add_action( 'init', 'se_3852702_init' );

function se_38527021_enqueue_scripts() {
  wp_enqueue_script( 'se_3852702' );
  wp_enqueue_style( 'se_3852702' );

  wp_enqueue_style( 'jquery-ui', 'http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css' );
}
// This is overkill as it always enqueue the scripts.
add_action( 'wp_enqueue_scripts', 'se_38527021_enqueue_scripts' );

连同类似的JS脚本一起

jQuery(document).ready(
  (function ($) {
    function dayAvailable(date) {
      console.log(date);
      let day = date.getDate();
      return [day % 2 == 0, 'my-class', 'Label when hover'];
  }

  $('#date-picker').datepicker({
    beforeShowDay: dayAvailable,
  })
})(jQuery)
);

导致

- Clemens Tolboom