jQuery UI Datepicker – 日期范围 – 突出显示介于两者之间的天数

我正在寻找一种方法来突出鼠标hover时2个输入日期范围之间的日子。

这个例子几乎可以实现我想要实现的目标： http ： //hackingon.net/files/jquery_datepicker/range.htm

唯一的区别是所选范围的突出显示应该发生在两个单独的日期选择器和鼠标hover上。

有什么建议？

---

更新：

好的，更多细节：

从第一个日期选择器中选择日期后，第二个日期选择器应突出显示上一个选定日期。 如果您将鼠标移过上一个选定日期后的一天，则两者之间的所有日期都应通过添加类来突出显示。

---

更新：这是我得到了多远：

$("#input-service_date_leave, #input-service_date_return").datepicker({ rangeSelect: true, beforeShow: customRange, onSelect: customRange, }); function customRange(input) { if (input.id == "input-service_date_leave") { $("#ui-datepicker-div td").die(); if (selectedDate != null) { $('#input-service_date_return').datepicker('option', 'minDate', selectedDate).datepicker('refresh'); } } if (input.id == "input-service_date_return") { $("#ui-datepicker-div td").live({ mouseenter: function() { $(this).prevAll("td:not(.ui-datepicker-unselectable)").addClass("highlight"); }, mouseleave: function() { $("#ui-datepicker-div td").removeClass("highlight"); } }); var selectedDate = $("#input-service_date_leave").datepicker("getDate"); if (selectedDate != null) { $('#input-service_date_return').datepicker('option', 'minDate', selectedDate).datepicker('refresh'); } } } 

http://jsfiddle.net/mayko/WbWg3/1/

唯一的问题是，直播事件只是突出显示当前hover行的td，而不是前面行的td。

有任何想法吗？

Answer 1

我在你的脚本中添加了一些内容。 像JSFiddle上的魅力一样工作。 看一看，让我知道。

  $("#input-service_date_leave, #input-service_date_return").datepicker({ rangeSelect: true, beforeShow: customRange, onSelect: customRange, }); function customRange(input) { if (input.id == "input-service_date_leave") { $("#ui-datepicker-div td").die(); if (selectedDate != null) { $('#input-service_date_return').datepicker('option', 'minDate', selectedDate).datepicker('refresh'); } } if (input.id == "input-service_date_return") { $("#ui-datepicker-div td").live({ mouseenter: function() { $(this).parent().addClass("finalRow"); $(".finalRow").prevAll().find("td:not(.ui-datepicker-unselectable)").addClass("highlight"); $(this).prevAll("td:not(.ui-datepicker-unselectable)").addClass("highlight"); }, mouseleave: function() { $(this).parent().removeClass("finalRow"); $("#ui-datepicker-div td").removeClass("highlight"); } }); var selectedDate = $("#input-service_date_leave").datepicker("getDate"); if (selectedDate != null) { $('#input-service_date_return').datepicker('option', 'minDate', selectedDate).datepicker('refresh'); } } } 

Answer 2

编辑：此脚本不适用于jquery 3.但它适用于版本1和2

这个JSFiddle是一个用2个日期表（多个月）来做这个例子的例子

 $("#input-service_date_leave, #input-service_date_return").datepicker({ rangeSelect: true, beforeShow: customRange, onSelect: customRange, numberOfMonths: [1, 2], }); function customRange(input) { if (input.id == "input-service_date_leave") { $("#ui-datepicker-div td").die(); if (selectedDate != null) { $('#input-service_date_return').datepicker('option', 'minDate', selectedDate).datepicker('refresh'); } } if (input.id == "input-service_date_return") { $("#ui-datepicker-div td").live({ mouseenter: function() { $(this).parent().addClass("finalRow"); $(".finalRow").parents('.ui-datepicker-group-last').parent().find('.ui-datepicker-group-first').find('tr').last().addClass("finalRowRangeOtherTable"); $(".finalRowRangeOtherTable").find("td:not(.ui-datepicker-unselectable)").addClass("highlight"); $(".finalRowRangeOtherTable").prevAll().find("td:not(.ui-datepicker-unselectable)").addClass("highlight"); $(".finalRow").prevAll().find("td:not(.ui-datepicker-unselectable)").addClass("highlight"); $(this).prevAll("td:not(.ui-datepicker-unselectable)").addClass("highlight"); }, mouseleave: function() { $(this).parent().removeClass("finalRow"); $("#ui-datepicker-div td").removeClass("highlight"); $(".finalRowRange").removeClass("finalRowRange").find('.highlight').removeClass("highlight"); $(".finalRowRangeOtherTable").removeClass("finalRowRangeOtherTable").find('.highlight').removeClass("highlight"); } }); var selectedDate = $("#input-service_date_leave").datepicker("getDate"); if (selectedDate != null) { $('#input-service_date_return').datepicker('option', 'minDate', selectedDate).datepicker('refresh'); } } } 

Answer 3

在这里为内联日期选择器做了一个日期范围hover的例子： http ：//codepen.io/denissamoilov/pen/RGKyPb？editors = 0010

 $(function(){ var datepicker = { container: $("#datepicker"), dateFormat: 'mm/dd/yy', dates: [null, null], status: null, inputs: { checkin: $('#checkin'), checkout: $('#checkout'), dates: $('#dates') } }; datepicker.container.datepicker({ numberOfMonths: 2, dateFormat: datepicker.dateFormat, minDate: 0, maxDate: null, beforeShowDay: function(date) { var highlight = false, currentTime = date.getTime(), selectedTime = datepicker.dates; // Highlight date range if ((selectedTime[0] && selectedTime[0] == currentTime) || (selectedTime[1] && (currentTime >= selectedTime[0] && currentTime <= selectedTime[1]))) highlight = true; return [true, highlight ? 'ui-datepicker-select' : ""]; }, onSelect: function(dateText) { if (!datepicker.dates[0] || datepicker.dates[1] !== null) { // CHOOSE FIRST DATE // fill dates array with first chosen date datepicker.dates[0] = $.datepicker.parseDate(datepicker.dateFormat, dateText).getTime(); datepicker.dates[1] = null; // clear all inputs datepicker.inputs.checkin.val(''); datepicker.inputs.checkout.val(''); datepicker.inputs.dates.val(''); // set current datepicker state datepicker.status = 'checkin-selected'; // create mouseover for table cell $('#datepicker').delegate('.ui-datepicker td', 'mouseover', function(){ // if it doesn't have year data (old month or unselectable date) if ($(this).data('year') == undefined) return; // datepicker state is not in date range select, depart date wasn't chosen, or return date already chosen then exit if (datepicker.status != 'checkin-selected') return; // get date from hovered cell var hoverDate = $(this).data('year')+'-'+($(this).data('month')+1)+'-'+$('a',this).html(); // parse hovered date into milliseconds hoverDate = $.datepicker.parseDate('yy-mm-dd', hoverDate).getTime(); $('#datepicker td').each(function(){ // compare each table cell if it's date is in date range between selected date and hovered if ($(this).data('year') == undefined) return; var year = $(this).data('year'), month = $(this).data('month'), day = $('a', this).html(); var cellDate = $(this).data('year')+'-'+($(this).data('month')+1)+'-'+$('a',this).html(); // convert cell date into milliseconds for further comparison cellDate = $.datepicker.parseDate('yy-mm-dd', cellDate).getTime(); if ( (cellDate >= datepicker.dates[0] && cellDate <= hoverDate) || (cellDate <= datepicker.dates[0] && cellDate >= hoverDate) ) { $(this).addClass('ui-datepicker-hover'); } else { $(this).removeClass('ui-datepicker-hover'); } }); }); } else { // CHOOSE SECOND DATE // push second date into dates array datepicker.dates[1] = $.datepicker.parseDate(datepicker.dateFormat, dateText).getTime(); // sort array dates datepicker.dates.sort(); var checkInDate = $.datepicker.parseDate('@', datepicker.dates[0]); var checkOutDate = $.datepicker.parseDate('@', datepicker.dates[1]); datepicker.status = 'checkout-selected'; //fill input fields datepicker.inputs.checkin.val($.datepicker.formatDate(datepicker.dateFormat, checkInDate)); datepicker.inputs.checkout.val($.datepicker.formatDate(datepicker.dateFormat, checkOutDate)).change(); datepicker.inputs.dates.val(datepicker.inputs.checkin.val() + ' - ' + datepicker.inputs.checkout.val()); } } }); }); 

Answer 4

jQuery UI Datepicker – 日期范围 – 突出显示介于两者之间的天数

我在你的脚本中添加了一些内容。 像JSFiddle上的魅力一样工作。 看一看，让我知道。

http://jsfiddle.net/mkginfo/C5r9d/1/

 var dates = $("#datepicker1, #datepicker2").datepicker({ changeMonth: true, changeYear: true, dateFormat: 'dd/mm/yy', maxDate: "01/01/2050", minDate: "01/01/2000", onSelect: function (selectedDate) { var option = this.id == "datepicker1" ? "minDate" : "maxDate", instance = $(this).data("datepicker"), date = $.datepicker.parseDate( instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings); dates.not(this).datepicker("option", option, date); } });