Überschreiben Stile für Sperrdaten in eonasdan-datetimepicker

Question

Ich möchte die Standardstile für die "eonasdan-datetimepicker" (https://github.com/Eonasdan/bootstrap-datetimepicker) überschreiben, die eine grundlegende Hover-Nachricht anzeigen. standardmäßig deaktiviert Daten werden mit dieser CSS-Attribute:

.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; 
} 

Ich möchte eine grundlegende Hover-Nachricht mit dem Titel Attribut angezeigt werden soll. Mein aktueller Versuch funktioniert überhaupt nicht, ich lege diesen Code in die document.ready-Funktion.

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

Danke

Answer 1

Hier ist eine CSS-Option: -

in voller Seite

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>