CODEWITHSUNDEEP
twitter-bootstrapdatetimepickerbootstrap-datetimepickereonasdan-datetimepicker
clouty
clouty

Reputation: 33

Tooltip Popup when mouseover disabled dates on Bootstrap 3 DateTimePicker v4

I've an array of disabled dates that is fetched using AJAX on page load. However, I would like to display a tooltip popup that shows "Promo Date" when the specified disabled dates are being moused over. Any ideas how can I do it?

$('#PickDate').datetimepicker({
    useCurrent: false,
    showTodayButton: true,
    minDate: parsedDate,
    defaultDate: startDate,
    format: 'DD MMM YYYY',
    disabledDates: dDatesArray,
    daysOfWeekDisabled: [0, 6]
});

Upvotes: 1

Views: 2904

Answers (1)

VincenzoC
VincenzoC

Reputation: 31482

All disabled dates are marked by the library with a .disabled class.

You can add a listner for dp.show and dp.update and then you can selected disabled dates with jQuery ($('td.day.disabled')) and add title attribute (using .attr()) to get native tooltip.

If you want to use Bootstrap tooltip you can simply call .tooltip(). Since the datetimepicker uses a HTML <table> you have to add data-container="body" to your element. As the docs says:

When using tooltips on elements within a .btn-group or an .input-group, or on table-related elements (<td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), you'll have to specify the option container: 'body' to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip is triggered).

Here a working example:

$('#PickDate').datetimepicker({
  useCurrent: false,
  showTodayButton: true,
  //minDate: parsedDate,
  //defaultDate: startDate,
  format: 'DD MMM YYYY',
  //disabledDates: dDatesArray,
  daysOfWeekDisabled: [0, 6]
}).on('dp.show dp.update', function(){
  $('td.day.disabled').each(function(index, element){
    var $element = $(element)
    $element.attr("title", "Promo Date");
    
    $element.data("container", "body");
    $element.tooltip()
  });
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<div class="input-group date" id="PickDate">
  <input type="text" class="form-control" />
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-calendar"></span>
  </span>
</div>

Upvotes: 1

Related Questions