restringir - propiedades datepicker jquery

jQuery UI Datepicker-Rango de fechas-Resalte días entre medio

Question

Estoy buscando una forma de resaltar los días entre el rango de fechas de 2 entradas sobre el mouse.

Este ejemplo casi hace lo que quiero lograr: http://hackingon.net/files/jquery_datepicker/range.htm

La única diferencia es que el resaltado del rango seleccionado debe ocurrir en dos separadores de fechas diferentes y al pasar el mouse.

¿Alguna sugerencia?

Actualizar:

Ok, un poco más detalles:

Después de seleccionar una fecha del primer datepicker, el segundo datepicker debe resaltar la fecha seleccionada previamente. Si pasa el mouse un día después del día seleccionado previamente, todos los días intermedios deben resaltarse agregando una clase.

Actualización: Esto es lo lejos que llegué:

 $("#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/

El único problema es que el evento en vivo solo resalta las td de la fila actual, pero no las td de las filas anteriores.

¿Algunas ideas?

Answer 1

editar: este script no funciona en jquery 3. Sin embargo, funciona en la versión 1 y 2

este JSFiddle es un ejemplo de hacerlo con 2 tablas de fechas (varios meses)

$("#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 2

jQuery UI Datepicker - Rango de fechas - Resalte días entre medio

Agregué un poco a tu script. Funcionó como un encanto en JSFiddle. Echa un vistazo y avísame.

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

Answer 3

Agregué un poco a tu script. Funcionó como un encanto en JSFiddle . Echa un vistazo y avísame.

 $("#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 4

Hice un ejemplo del rango de fechas para un selector de fecha en línea aquí: 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());
}
}
});
});