jasilva Asked: 2020-12-22 15:48:47 +0800 CST 2020-12-22 15:48:47 +0800 CST 2020-12-22 15:48:47 +0800 CST 如何在 jQuery Datepicker 中为日期范围添加替代颜色? 772 有没有办法将 jQuery Datepicker的日子画成不同的颜色? 例如: 蓝色表示第一个会话,绿色表示第二个会话,红色表示第三个会话。 我有 3 个会话(3 个间隔) javascript 2 Answers Voted Best Answer Diego 2020-12-22T19:57:48+08:002020-12-22T19:57:48+08:00 您可以使用beforeShowDay选项。这是一个功能,虽然不是很直观,但允许您自定义日元素。 假设您要标记“8”天 $(function() { // $(document).ready(... $('#tu-input-fecha').datepicker({ beforeShowDay: function(date) { if (date.getDate() === 8) { return [true, 'bg-red', 'titulo opcional']; } return [true]; } }); }); 您传递给的函数会beforeShowDay在要显示的日历页面的每一天自动调用。在该函数中,您将收到一个Date带有相应日期的对象,您可以通过它决定是否要修改该元素。 现在不明显的是,您必须返回一个包含 3 个值的数组: 第一个指示日期是否可选true/false 第二个是一个字符串,其中包含要分配给元素的 css 类的名称 第三个是悬停时出现的可选标题 最后,您总是必须至少返回,[true]以便剩余的日子符合条件。 作为附加细节 样式必须设置为a我们类的子元素,使用background,background-color没有结果,因为 jQuery UI css 编写它background并在最后应用它,除了使用¡important; .dia-especial a{ background: #ff00ff url(images/ui-bg_flat_90_ffffff_40x100.png) 50% 50% repeat-x !important; font-weight: normal; color: #3f3f3f; } Kristian Damian 2020-12-22T18:11:25+08:002020-12-22T18:11:25+08:00 您可以使用切片方法根据需要的数量取元素 $(".ui-state-default").slice(0,3).css("background-color","red") ui-state-default 类是带有 day 元素的类,在示例中采用前 3 个元素。 有必要根据您的需要确定确定周期的逻辑
您可以使用beforeShowDay选项。这是一个功能,虽然不是很直观,但允许您自定义日元素。
假设您要标记“8”天
您传递给的函数会
beforeShowDay
在要显示的日历页面的每一天自动调用。在该函数中,您将收到一个Date
带有相应日期的对象,您可以通过它决定是否要修改该元素。现在不明显的是,您必须返回一个包含 3 个值的数组:
true/false
最后,您总是必须至少返回,
[true]
以便剩余的日子符合条件。作为附加细节
样式必须设置为
a
我们类的子元素,使用background
,background-color
没有结果,因为 jQuery UI css 编写它background
并在最后应用它,除了使用¡important;
您可以使用切片方法根据需要的数量取元素
ui-state-default 类是带有 day 元素的类,在示例中采用前 3 个元素。
有必要根据您的需要确定确定周期的逻辑