Bootstrap日期范围选择器获取鼠标悬停的当前日期

Question

这个日期采摘器具有IM功能. http://www.daterangepicker.com/

但是我使用这个插件,如何获得鼠标悬停的当前日期？举个例子,如果我在2016年2月23日徘徊,我如何获得23日期？getDate在我点击日期之前不会触发.那么当前的悬停日期？非常感谢

注意

我在同一页面上有jquery-ui和bootstrap datepicker,因此存在冲突.为了解决冲突,我使用的是bootstrapDP代替datepicker.

我的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>

我的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

datepicker作为HTML数据属性存储在input绑定到的数据属性上,因此可以通过以下方式访问:

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

检查datepicker对象向我们展示了两个有用的属性,第一个是viewDate属性.这只是存储当前月份视图的日期(没有特定日期,但在此阶段无关紧要,因为我们将以编程方式确定该日期).

我们需要的第二个属性是picker财产.这为我们提供了选择器存在的DOM节点:

var element = datepicker.picker;

从那里可以通过简单的DOM遍历来达到day元素(它们都是TD类'day'的元素):

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

所以把它们放在一起,你可以得到当前正在徘徊的日子:

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

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

然后,我们需要处理day细胞可能与前一个月或下个月相关的事实.幸运的是,课程的存在old(上个月)和new(下个月)突出了这一点.

使用这些信息,再加上viewDate我们上面讨论的财产,我们可以做一些日期操作来确定当前日期被徘徊(注意额外的检查以确保我们改变年份和月份,如果从第一个月前进/后退一个月或一年的最后一个月):

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

注意:Date.getMonth()返回0..11范围内的整数(0表示1月,11表示12月).这一点很重要.