#7584 closed bug (notabug)

Opened July 28, 2011 01:25PM UTC

Closed July 20, 2014 01:20AM UTC

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.

Attachments (0)
Change History (8)

Changed November 30, 2011 10:05AM UTC by nicklevett comment:1

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.

Changed October 11, 2012 02:43PM UTC by scottgonzalez comment:2

milestone: 1.9.0 → 1.11.0

Changed October 18, 2012 12:00AM UTC by mikesherov comment:3

status: new → open

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.

Changed October 18, 2012 12:03AM UTC by mikesherov comment:4

Sorry, here's the canonical reference: https://github.com/jquery/jquery-ui/blob/a3f1a34d3b997550a5a8cf4c630e6580cd37cde5/ui/jquery.ui.datepicker.js#L720

Changed June 24, 2014 11:44PM UTC by scottgonzalez comment:5

milestone: 1.11.0 → none

Changed July 17, 2014 01:43PM UTC by scottgonzalez comment:6

owner: → nicklevett
status: open → pending

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

Changed July 19, 2014 03:47PM UTC by nicklevett comment:7

status: pending → new

Replying to [comment:6 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.

Changed July 20, 2014 01:20AM UTC by scottgonzalez comment:8

resolution: → notabug
status: new → closed

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