3

I would like to override the default styles for the "eonasdan-datetimepicker" (https://github.com/Eonasdan/bootstrap-datetimepicker) displaying a basic hover message. By default disabled dates are using this CSS attributes:

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

I would like to display a basic hover message with the title attribute. My current try is not working at all, I put this code in the document.ready function. 

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

Thank you

Jerry
  • 33
  • 1
  • 5

1 Answers1

4

Here is a css option:-

View in Full Page

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>
BenG
  • 14,826
  • 5
  • 45
  • 60
  • Hi there, Thanks for this. This is so close to what I am trying to achieve. Is it possible to have a dynamic message for on hover disabled dates? Ex. If I hover to January 1, it will say "New Years day", December 25 to "Christmas Day". Can you point me on the right direction on this? – Bryan Adams Oct 30 '17 at 06:30
  • @BryanAdams you could override the content for the specific days using the `[data-day="12/25/2017"]` css attribute selector. https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors – BenG Oct 30 '17 at 11:18