【问题标题】:Change background color of a specific a day in a jquery datepicker在jquery datepicker中更改特定日期的背景颜色
【发布时间】:2012-10-17 23:18:03
【问题描述】:

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

我有这个日期选择器:

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

【问题讨论】:

标签: jquery-ui-datepicker


【解决方案1】:

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

这是一个工作代码 sn-p 和使用 jQueryUI 日期选择器的 beforeShowDay 函数的日期选择器外观的屏幕截图:

$(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' />

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

文档:Jquery ui documentation on beforeShowDay

【讨论】:

  • 示例中的 jquery 版本运行良好。
猜你喜欢
  • 2021-11-27
  • 2014-03-22
  • 1970-01-01
  • 2018-06-29
  • 2019-09-27
  • 1970-01-01
  • 2012-02-19
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多