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

Posted 2023-03-06

【中文标题】样式化日期选择器：突出显示特定日期

【英文标题】：Styling datepicker: highlight specific dates

【发布时间】：2016-11-26 09:23:35

【问题描述】：

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

我在我的 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;

但是，当我单击日历时，此示例中的日期（2016 年 7 月 26 日）不会突出显示，但会出现标准样式。我的错在哪里？

非常感谢您的帮助！

编辑：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' );

还是不行。

【问题讨论】：

您好，欢迎来到 SO，您能告诉我们您的 Datepicker 的 HTML 代码吗？您可以右键单击 Datepicker，然后 Inspect Element 并复制 HTML 代码。

谢谢帕斯卡。我查看了 HTML 代码，在这里发布它似乎太长了，所以我添加了一个指向我的站点的链接。希望这很好，但如果不是请告诉我

datepicker 不是函数，prettyphoto 不是函数......

是的，我也看到了（别管漂亮的照片，那是一些我仍然需要删除的旧代码）。但是怎么会这样呢？是不是因为wordpress datapicker插件使用了不同的函数名？

我已将单击它时弹出的实际日历的 ID 名称 ('ui-datepicker-div') 添加到上面的代码中，但它仍然不起作用：/ 抱歉，我我对 jscript 完全陌生，所以这些都是在黑暗中拍摄的

【参考方案1】：

我认为您没有将突出显示的课程设置为选定日期。 试试

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

这会帮助你 并更改您的 CSS：

tr.Highlighted 
     background-color:red;

我已经测试过了

【讨论】：

谢谢卡维安。尝试了你的方法，但仍然没有运气

恐怕没有。问题是 datepicker 未被识别为函数：$(...).datepicker is not a function (index):424 Uncaught TypeError: $(...).prettyPhoto is not a function。我认为问题出在插件上。在某处定义了 datepicker 函数，我需要弄清楚在哪里可以添加日期数组和 showbeforedate 函数。

【参考方案2】：

您正试图在其库加载之前调用 datepiker 方法。

尝试将此代码放入您的 functions.php 文件中

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

   //Your js code goes here

  
?>

【讨论】：

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

【参考方案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)
);

导致