这个日期采摘器具有IM功能.
http://www.daterangepicker.com/
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>
我的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'));
});
解决方法
datepicker作为HTML数据属性存储在它所绑定的输入上,因此可以通过以下方式访问：
var datepicker = $('input[name="date"]').data('datepicker');
检查datepicker对象向我们展示了两个有用的属性,第一个是viewDate属性.这仅仅存储了当前月份视图的日期(没有特定日期,但在此阶段无关紧要,因为我们将以编程方式确定该日期).
我们需要的第二个属性是picker属性.这为我们提供了选择器存在的DOM节点：
var element = datepicker.picker;
从那里可以通过简单的DOM遍历来达到day元素(它们都是具有’day’类的TD元素)：
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);
});
然后,我们需要处理这样一个事实,即细胞可以与前一个月或下个月相关.幸运的是,旧的(上个月)和新的(下个月)类的存在凸显了这一点.
使用这些信息,结合我们上面讨论过的viewDate属性,我们可以做一些日期操作来确定当前日期被徘徊(注意额外的检查以确保我们改变年份和月份,如果从第一个月前进/后退一个月或一年中的最后一个月)：
var datepicker = $('input[name="date"]').data('datepicker'),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月).这一点很重要.
