gpt4 book ai didi

javascript - 在 eonasdan-datetimepicker 中覆盖禁用日期的样式

转载 作者:行者123 更新时间:2023-11-29 10:35:58 27 4
gpt4 key购买 nike

我想覆盖显示基本悬停消息的“eonasdan-datetimepicker”(https://github.com/Eonasdan/bootstrap-datetimepicker)的默认样式。默认情况下,禁用日期使用此 CSS 属性:

.bootstrap-datetimepicker-widget table td span.disabled,
.bootstrap-datetimepicker-widget table td span.disabled:hover {
background: none;
color: #777777;
cursor: not-allowed;
}

.bootstrap-datetimepicker-widget table th.disabled,
.bootstrap-datetimepicker-widget table th.disabled:hover {
background: none;
color: #777777;
cursor: not-allowed;
}

.bootstrap-datetimepicker-widget table td span.disabled,
.bootstrap-datetimepicker-widget table td span.disabled:hover {
background: none;
color: #777777;
cursor: not-allowed;
}

我想显示带有 title 属性的基本悬停消息。我目前的尝试根本不起作用,我将这段代码放在 document.ready 函数中。

    if ($(".bootstrap-datetimepicker-widget").attr('th, td, span', 'disabled') == 'true')
{
$(".bootstrap-datetimepicker-widget").attr('title', 'This date is disabled');
}

谢谢

最佳答案

这是一个 css 选项:-

全页查看

td.day{
position:relative;
}

td.day.disabled:hover:before {
content: 'This date is disabled';
color: red;
background-color: white;
top: -22px;
position: absolute;
width: 136px;
left: -34px;
z-index: 1000;
text-align: center;
padding: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<div style="overflow:hidden;">
<div class="form-group">
<div class="row">
<div class="col-md-8">
<div id="datetimepicker"></div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker').datetimepicker({
inline: true,
sideBySide: true,
daysOfWeekDisabled: [0, 6]
});
});
</script>
</div>

关于javascript - 在 eonasdan-datetimepicker 中覆盖禁用日期的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36286564/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com