jquery-ui-datepicker之在 jquery datepicker 中更改特定日期的背景颜色

JeffreyZhao 阅读:10 2024-10-01 17:34:08 评论:0

我想知道如何在 datePicker 中的日期上设置背景颜色;我跟着很多教程,但我没有得到任何结果。

我有这个日期选择器:

<div id="datepicker"></div> 

请您参考如下方法:

以防万一 Mongoose 的链接有一天坏了,最好在 StackOverflow 上发布完整的答案:

这是使用 beforeShowDay 的日期选择器外观的工作代码片段和屏幕截图jQueryUI 日期选择器的功能:

$(document).ready(function() { 
    var SelectedDates = {}; 
    SelectedDates[new Date('04/05/2016')] = new Date('04/05/2016'); 
    SelectedDates[new Date('05/04/2017')] = new Date('05/04/2017'); 
    SelectedDates[new Date('06/06/2018')] = new Date('06/06/2018'); 
 
    $('#txtDate').datepicker({ 
        beforeShowDay: function(date) { 
            var Highlight = SelectedDates[date]; 
            if (Highlight) { 
                return [true, "Highlighted", Highlight]; 
            } 
            else { 
                return [true, '', '']; 
            } 
        } 
    }); 
});
body 
{ 
    font-family:Arial; 
    font-size : 10pt; 
    padding:5px; 
} 
 
.Highlighted a{ 
   background-color : Green !important; 
   background-image :none !important; 
   color: White !important; 
   font-weight:bold !important; 
   font-size: 12pt; 
}
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 
 
<input type='text' id='txtDate' />




fiddle : http://jsfiddle.net/jquerybyexample/cqf9d/?utm_source=website&utm_medium=embed&utm_campaign=cqf9d

文档: Jquery ui documentation on beforeShowDay


标签:jquery
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

关注我们

一个IT知识分享的公众号