CODEWITHSUNDEEP
javascripttwitter-bootstrapdatepickerpopover
Shalafister's
Shalafister's

Reputation: 889

Bootstrap Datepicker show popover on dates

I have added a bootstrap datepicker successfully when user clicks to input field. I would like to show some specific data when mouse hovers on the bootstrap datepicker as airbnb is it possible ?

enter image description here

EDIT

Here is my fiddle

html

  <input type="text" name="start_date" id="date-from" placeholder="Check-in">

js

$(document).ready(function(){
   //Date Pickers - Main Page
   var nowTemp = new Date();
   var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
   var checkin = $('#date-from').datepicker({
    format: 'dd/mm/yyyy',
    startDate: '+1d',
    weekStart: 1,


    beforeShowDay: function (date) {
      return date.valueOf() >= now.valueOf();
    },
    autoclose: true

  }).on('changeDate', function (ev) {

 });







});

Upvotes: 0

Views: 1296

Answers (1)

Kishore Kumar
Kishore Kumar

Reputation: 12874

Here's the JSFiddle that I have updated to show popover.

https://jsfiddle.net/mr3dxj5p/4/

$('body').on({
    mouseenter: function() {
      $(this).popover({
        content: '$' + parseInt($(this).text()) * 100,
        placement: 'top',
        container: '.datepicker',
        title: 'Price'
      }).popover('show');
    },
    mouseleave: function() {
      $(this).popover('hide')
    }
  }, '.datepicker .day:not(.disabled)');

Upvotes: 3

Related Questions