覆盖eonasdan日期时间选择器中禁用日期的样式

Override Styles for disable dates in eonasdan-datetimepicker

本文关键字：日期 样式 选择器 eonasdan 时间 覆盖      更新时间：2023-09-26

我想覆盖"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>

相关文章：