Question

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

但我使用this plugin，如何获得鼠标悬停的当前日期？例如，如果我在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>

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

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

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

检查datepicker对象向我们展示了两个有用的属性，第一个是viewDate属性。这只是存储当前月份视图的日期（没有特定日期，但在此阶段并不重要，因为我们将以编程方式建立该视图。）

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

var element = datepicker.picker;

从那里可以通过简单的DOM遍历到达日元素（它们都是TD元素与课程的一天＆＃39;）：

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月）。这一点很重要。

Answer 2

试试这个，检查控制台输出，小提琴链接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());
  }
});

希望这有助于.. :)）

Answer 3

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

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

Answer 4

知道了！ Live demo fiddle

此代码的有趣部分是：

$('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);
});

说明：

您可以从$(".bootstrapDP td.day")中提取数字日期，如代码所示。月份和日期来自$(".bootstrapDP-switch")，但如果您将鼠标悬停在“最后一个”或“下一个月”的某个日期，则可能会有所不同。

因此，我还提供了一个帮助function getMonthYear in the solution code，它将确定您是在上个月还是下个月并正确返回。如果选择其中一个显示日期属于“下一个”或“最后一个月”，则可以从$(".bootstrapDP-months")中提取其他月份。

目前，我一直认为，在禁用日期上空盘旋将无效。这可以通过删除行if(x.hasClass("disabled")) { return; }

来更改

确认

此解决方案基于@mike tracker的先前解决方案。

引导日期范围选择器获取鼠标悬停在

4 个答案:

知道了！ Live demo fiddle

说明：

确认