Opened 8 years ago

Closed 5 years ago

#7584 closed bug (notabug)

Date range with beforeShowDay causing last day of month to have ui-state-hover class

Reported by: nicklevett Owned by: nicklevett
Priority: minor Milestone: none
Component: ui.datepicker Version: 1.8.14
Keywords: Cc:
Blocked by: Blocking:

Description

While implementing some functionality to highlight days between two dates I noticed a weird issue.

Testcase: http://jsfiddle.net/WyZ6v/

If you select for example, 7th July in the "From" datepicker 21st September 2011 in the "To" datepicker, then open the "From" datepicker and now 31st July and 31 August have become highlighted by ui-state-hover even though the mouse is not over it.

This only becomes apparent when using ui-datepicker-days-cell-over (as the return class) and not any other classes. Removing the CSS files still causes the extra class.

Moving the mouse into each of the tables removes the ui-state-hover from the offending cell/day.

Change History (8)

comment:1 Changed 7 years ago by nicklevett

I narrowed the problem down to the function below:

function bindHover(dpDiv) {
	var selector = 'button, .ui-datepicker-prev, .ui-datepicker-next, .ui-datepicker-calendar td a';
	return dpDiv.bind('mouseout', function(event) {
			var elem = $( event.target ).closest( selector );
			if ( !elem.length ) {
				return;
			}
			elem.removeClass( "ui-state-hover ui-datepicker-prev-hover ui-datepicker-next-hover" );
		})
		.bind('mouseover', function(event) {
			var elem = $( event.target ).closest( selector );
			if ($.datepicker._isDisabledDatepicker( instActive.inline ? dpDiv.parent()[0] : instActive.input[0]) ||
					!elem.length ) {
				return;
			}
			elem.parents('.ui-datepicker-calendar').find('a').removeClass('ui-state-hover');
			elem.addClass('ui-state-hover');
			if (elem.hasClass('ui-datepicker-prev')) elem.addClass('ui-datepicker-prev-hover');
			if (elem.hasClass('ui-datepicker-next')) elem.addClass('ui-datepicker-next-hover');
		});
}

Everytime the datepicker is opened it appears to go through every ".ui-datepicker-calendar td a" and removes and then sets ".ui-state-hover". So on the last day of the month it's set to the hover state but never unset until you explicitly mouseover over another day.

comment:2 Changed 7 years ago by Scott González

Milestone: 1.9.01.11.0

comment:3 Changed 7 years ago by mikesherov

Status: newopen

This is confirmed. The problem comes from this line: https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.datepicker.js#L720 which calls the delegated mouseover() when the calendar opens.

comment:5 Changed 5 years ago by Scott González

Milestone: 1.11.0none

comment:6 Changed 5 years ago by Scott González

Owner: set to nicklevett
Status: openpending

Why are you using a class name that is intended for a completely different purpose? It seems like you're intentionally introducing a conflict.

comment:7 in reply to:  6 Changed 5 years ago by nicklevett

Status: pendingnew

Replying to scott.gonzalez:

Why are you using a class name that is intended for a completely different purpose? It seems like you're intentionally introducing a conflict.

It's been a very long time since I submitted this but from what I remember the class highlights the selected date in the picker. I wanted to highlight all days in between the from and to pickers because the picker doesn't do this. I guess as the CSS class already did what was required I used that rather than create another class for that purpose.

comment:8 Changed 5 years ago by Scott González

Resolution: notabug
Status: newclosed

I'm going to say this isn't a bug since you're reusing a managed class for a different purpose.

Note: See TracTickets for help on using tickets.