在eonasdan-datetimepicker中覆蓋禁用日期的樣式

Question

我想覆蓋顯示基本懸停消息的“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');
    }

謝謝

Answer 1

這是一個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>