覆盖样式在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; 
} 

我想显示的标题属性的基本悬停消息。 我目前的尝试根本没有工作，我把这个代码放在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>