设置日期选择器样式:突出显示特定日期
设置日期选择器样式:突出显示特定日期
提问于 2016-07-22 20:55:08
我知道之前有人问过这个问题，我到目前为止找到的“解决方案”似乎不起作用。
我在我的wordpress网站上使用了Contact Form7和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' );还是不能工作。
回答 3
Stack Overflow用户
发布于 2016-07-22 22:21:12
我认为您没有将突出显示的类设置为选定的日期。试一试
$('td').on('click', function(){
$('td.Highlighted').removeClass('Highlighted');
$(this).addClass('Highlighted');
});这将帮助你并改变你的css：
tr.Highlighted {
background-color:red;
}我已经测试过了
Stack Overflow用户
发布于 2016-07-23 19:25:49
您正在尝试在加载某个datepiker方法的库之前调用该方法。
尝试将此代码放入functions.php文件中
<?php
add_action( 'wp_footer', 'my_custom_js');
function my_custom_js(){
//Your js code goes here
}
?>Stack Overflow用户
发布于 2018-06-01 19:58:15
我感到困惑和困惑，直到我把我的脚本放在页脚。然后它就成功了。我有单独的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)
);结果是
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38527021
复制相关文章
相似问题
腾讯云开发者
