[英]How to edit classes in tempus-dominus (datetimepicker) not shown in the source file?
I would like to change for instances the class .day of tempus-dominus ( https://tempusdominus.github.io/bootstrap-4/ ) but even when using !important it does not seem to work when inspecting (try not to click around because the inspecting of it is weird. Even when forcing :hover the dropdown disappears). 我想为实例更改tempus-dominus的.day类( https://tempusdominus.github.io/bootstrap-4/ ),但是即使在使用!important时,它在检查时似乎也不起作用(尝试不要单击因为它的检查很奇怪。即使强制:hover,下拉菜单也会消失)。
Let's say I want to change the font-size of .day from 90% to 100% 假设我要将.day的字体大小从90%更改为100%
Source code: https://tempusdominus.github.io/bootstrap-4/theme/css/tempusdominus-bootstrap-4.css 源代码: https : //tempusdominus.github.io/bootstrap-4/theme/css/tempusdominus-bootstrap-4.css
Find the code below =) 在下面找到代码=)
Thanks in advance for your help! 在此先感谢您的帮助!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tempus Dominus</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/github.min.css" />
<link rel="stylesheet" href="https://tempusdominus.github.io/bootstrap-4/theme/css/tempusdominus-bootstrap-4.css" />
<style>
/*
.bootstrap-datetimepicker-widget table td {
color: red;
}
*/
}
</style>
</head>
<body>
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/js/tempusdominus-bootstrap-4.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-6">
<input type="text" class="form-control datetimepicker-input" id="datetimepicker5" data-toggle="datetimepicker" data-target="#datetimepicker5" />
</div>
<script type="text/javascript">
$(function() {
$('#datetimepicker5').datetimepicker();
});
</script>
</div>
</div>
</body>
</html>
In order to debug the plugin you can add a debugger call like: 为了调试插件,您可以添加一个调试器调用,例如:
$('#datetimepicker5').on('hide.datetimepicker', function(e) {
$('#datetimepicker5').datetimepicker('show');
debugger;
});
If you need to change the font-size for all cells with the class day You can: 如果需要在上课日更改所有单元的字体大小 ,则可以:
.bootstrap-datetimepicker-widget table td.day {
font-size: 80%;
}
$('#datetimepicker5').datetimepicker(); $('#datetimepicker5').on('show.datetimepicker', function(e) { //$('#datetimepicker5').datetimepicker('show'); //debugger; });
.bootstrap-datetimepicker-widget table td.day { font-size: 80%; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" > <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js"></script> <div class="container"> <div class="row"> <div class="col-sm-6"> <input type="text" class="form-control datetimepicker-input" id="datetimepicker5" data-toggle="datetimepicker" data-target="#datetimepicker5" /> </div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.