Bootstrap date range picker get current date the mouse is hovering over

Question

THIS DATE PICKER HAS THE FUNCTIONALITY IM AFTER. http://www.daterangepicker.com/

But Im using this plugin, how do I get current date the mouse is hovering over? For an example if I hover over 23th Feb 2016, how do I get the date 23rd? getDate doesnt trigger until I click on a date. So current date on hover? Thanks a lot

NOTE

I have jquery-ui and bootstrap datepicker both on the same page so there was a conflict. To resolve the conflict, I am using bootstrapDP instead of datepicker.

MY HTML

<div class="home-check-in">
  <div class="search-form-group calendar">
    <span class=" date-dropdown-select">
    <div class="input-daterange input-group" id="datepicker2">
      <input type="text" required readonly class="input-group form-control" placeholder="dd/mm/yyyy" id="FromDate" name="start" />
      <span class="input-group-addon"></span>
      <input type="text" required readonly class="input-group form-control"  placeholder="dd/mm/yyyy" id="ToDate" name="end" />
    </div>
    </span> </div>
</div>

MY JS

$('.input-daterange').bootstrapDP({

    startDate: "+0d",
    defaultViewDate : "+0d",
    format: "dd-M-yyyy",
    maxViewMode: 3,
    autoclose: true,
    orientation: "bottom auto",
    disableTouchKeyboard:true,

}).on("changeDate", function() {

    $("#ToDate").focus();   //popup up end date calendar
    var selectedFromDate = $('#FromDate').bootstrapDP("getDate");
    var selectedToDate = $('#ToDate').bootstrapDP("getDate");
    $("#from").val(dateFormat(selectedFromDate,'yyyy-mm-dd'));
    $("#to").val(dateFormat(selectedToDate,'yyyy-mm-dd'));
});

Answer 1

The datepicker gets stored as a HTML data attribute on the input to which it is bound, and thus is accessible with:

var datepicker = $('input[name="date"]').data('datepicker');

Inspecting the datepicker object shows us two useful properties, the first is the viewDate property. This merely stores the date of the current month view (no particular day, but that doesn't matter at this stage as we're going to programatically establish that).

The second property we need is the picker property. This gives us the DOM node which the picker exists as:

var element = datepicker.picker;

And from there it's simple DOM traversal to reach the day elements (they are all TD elements with the class 'day'):

var days = element.find('td.day');

So putting it all together, you could get the current day that is being hovered over with:

var datepicker = $('input[name="date"]').data('datepicker'),
    element = datepicker.picker;

element.on('mouseover', 'td.day', function(e) {
  var day = parseInt($(this).html(), 10);
});

We then need to deal with the fact that the day cells can relate to the previous or next months. Fortunately, this is highlighted by the presence of the classes old (for last month) and new (for next month).

Using that information, combined with the viewDate property we discussed above, we can do some date manipulations to establish the current date being hovered over (note the extra checks to ensure we change the year and month if going forward/back a month from the first or last month of the year):

var datepicker = $('input[name="date"]').data('datepicker'),
    element = datepicker.picker;

element.on('mouseover', 'td.day', function(e) {
  var hoverDate = new Date(datepicker.viewDate.getTime()),
      day = parseInt($(this).html(), 10);

  // Set the day to the hovered day
  hoverDate.setDate(day);

  // If the previous month should be used, modify the month
  if ( $(this).hasClass('old') ) {
    // Check if we're trying to go back a month from Jan
    if ( hoverDate.getMonth() == 0 ) {
      hoverDate.setYear(hoverDate.getYear() - 1);
      hoverDate.setMonth(11); 
    } else {
      hoverDate.setMonth(hoverDate.month - 1);
    }
  }
  else if ( $(this).hasClass('new') ) {
    // Check if we're trying to go forward a month from Dec
    if ( hoverDate.getMonth == 11 ) {
      hoverDate.setYear(hoverDate.getYear() + 1);
      hoverDate.setMonth(0); 
    } else {
      hoverDate.setMonth(hoverDate.month + 1);
    }
  }

  console.log(hoverDate);
});

Note: Date.getMonth() returns an integer in the range 0..11 (0 being January, 11 being December). This is important to remember.

Answer 2

Try this, check the console for output, fiddle link https://jsfiddle.net/9n451jcp/2/

var dp = $('.input-daterange');

dp.bootstrapDP({

  startDate: "+0d",
  defaultViewDate: "+0d",
  format: "dd-M-yyyy",
  maxViewMode: 3,
  autoclose: true,
  orientation: "bottom auto",
  disableTouchKeyboard: true,

}).on("changeDate", function() {

  $("#ToDate").focus(); //popup up end date calendar
  var selectedFromDate = $('#FromDate').bootstrapDP("getDate");
  var selectedToDate = $('#ToDate').bootstrapDP("getDate");
  $("#from").val(dateFormat(selectedFromDate, 'yyyy-mm-dd'));
  $("#to").val(dateFormat(selectedToDate, 'yyyy-mm-dd'));
});

$('body').on('mouseenter', '.bootstrapDP td.day', function() {
  if (!$(this).hasClass('disabled')) {
    console.log($(this).text());
  }
});

hope this helps..:)

Answer 3

Got it! Live demo fiddle

The interesting portion of this code is:

$('body').on('mouseenter', '.bootstrapDP td.day', function() {
    var x = $(this); // Save DOM object to variable. Preserve context.

    // Don't show anything for disabled days. Simply return.
    if(x.hasClass("disabled")) { return; }

    // Extract the date info.
    var theDate         = x.text();
    var theMonthYear    = getMonthYear(x); // using helper func.
    var output          = theDate + ' ' + theMonthYear;

    // Show in the UI. Can otherwise use the vars here.
    $("#hoverDate").html(output);
});

Explanation:

You can extract the numeric date from $(".bootstrapDP td.day") as shown in the code. The month and date come from $(".bootstrapDP-switch") but might differ in case you are hovering over a date from the "last" or "next" month.

Therefore, I've also provided a helper function getMonthYear in the solution code that will determine if you're in the last or next month and return appropriately. Other months could be extracted from $(".bootstrapDP-months") in case of selecting one of the displayed dates that falls within "next" or "last" month.

For the moment, I've maintained that hovering over a disabled date will have no effect. This could be changed by removing the line if(x.hasClass("disabled")) { return; }

Acknowledgment

This solution builds on the previous solution of @mike tracker.

Answer 4

$(document).on('mouseenter','#FromDate td.day',function() {
  var FromDate = $(this).html();
});

$(document).on('mouseenter','#ToDate td.day',function() {
  var ToDate = $(this).html();
});