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

Question

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

javascriptjquerycsstwitter-bootstrapeonasdan-datetimepicker

3

我希望能够覆盖 "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');
    }

谢谢

- Jerry

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BenG · Accepted Answer

这里有一个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>