javascript - 如何使用 Jquery 在 datetimepicker 中将颜色应用于周末(周六和周日)以及下个月或上个月的日期
问题描述
我有以下日期时间选择器代码,
运行良好,但我也需要为周末(周六和周日)以及下个月或上个月的日期填充颜色。
请帮助做到这一点。下面是可运行的代码,请提供代码来做到这一点。
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
$('#datetimepicker1').datetimepicker(
{
format: 'DD/MM/YYYY HH:mm',
}
);
});
</script>
<style>
body {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
</body>
</html>
谢谢!..
解决方案
There is a class called .bootstrap-datetimepicker-widget .weekend
. Change that like below.
.bootstrap-datetimepicker-widget .weekend {
color: red;
/*Apply your color*/
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
$('#datetimepicker1').datetimepicker({
format: 'DD/MM/YYYY HH:mm',
});
});
</script>
<style>
body {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
</body>
</html>
推荐阅读
- c - 一个元素的 eBPF 映射。映射类型和内核/用户空间通信
- php - PHP pthreads 异步优化
- gcc - 使用相同编译器标志的不同 Makefile 是否会生成不同的二进制文件
- php - 如何从在线插入两个表?
- neo4j - Cypher:通过关系进行深度优先导航
- c# - 与 OData 控制器等效的 Odata WCF 服务功能
- python - 如何查询由多个外键组成的模型
- azure - Azure 租户、Azure 目录和 Azure Active Directory 之间有什么区别?
- python - 填充 Torch 张量列表(或 numpy 数组)
- java - 如何在 Java 中静态初始化对象数组