jquery ui Datepicker 中为星期添加颜色

最新推荐文章于 2026-06-14 10:08:44 发布

原创最新推荐文章于 2026-06-14 10:08:44 发布 · 440 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#https #服务器 #网络协议

JS 专栏收录该内容

16 篇文章

订阅专栏

这段代码展示了如何使用JavaScript的jQuery UI Datepicker插件，结合一个预定义的节假日列表，来在日期选择器中突出显示节假日、周末。通过比较日期并应用不同的CSS类，实现了不同日期的背景和文字颜色变化，使得用户界面更加直观。

//休息日列表
var holidays = ['2021-12-05', '2021-12-13', '2021-02-11', '2021-03-21', '2021-04-29', '2021-05-03', '2021-05-04', '2021-05-05', '2021-07-21', '2021-09-15', '2021-09-23', '2021-10-13', '2021-11-03', '2021-11-23', '2014-12-23', '2014-12-24'];
 
$('#Date').datepicker({                       // 星期六和星期日变更颜色
beforeShowDay: function(date) {
for (var i = 0; i < holidays.length; i++) {
var holiday = new Date();
holiday.setTime(Date.parse(holidays[i]));   // 将节假日转换为日期类型
 
if (holiday.getYear() == date.getYear() &&  // 法定假日判断
holiday.getMonth() == date.getMonth() &&
holiday.getDate() == date.getDate()) {
return [true, 'class-holiday', '节假日'];
}
}
 
if (date.getDay() == 0) {                     // 星期天
return [true, 'class-sunday', '星期天'];
} else if (date.getDay() == 6) {              // 星期六
return [true, 'class-saturday', '星期六'];
} else {                                      // 工作日
return [true, 'class-weekday', '工作日'];
}
}
});


/* 背景 文字上色 */
.class-holiday > .ui-state-default {
background: #FFFFCC !important;
color: red !important;
}
.class-sunday > .ui-state-default {
background: #FFCCCC !important;
color: red !important;
}
.class-saturday > .ui-state-default {
background: #CCCCFF !important;
color: blue !important;
}