Opened 6 years ago

Closed 4 years ago

#6042 closed bug (duplicate)

Manual text entry in Datepicker form field adds invisible element on page

Reported by: maz Owned by:
Priority: minor Milestone:
Component: ui.datepicker Version: 1.8.4
Keywords: Cc:
Blocked by: Blocking:


When first typing in a valid date before ever displaying the Datepicker calendar (showOn: 'button'), the Datepicker is updated behind the scenes to reflect this new date (keyup event).

Though the calendar remains invisible, this feature generates markup which occupies room at the bottom of the page, extending it significantly.

This problem does not occur after you have shown and hidden the calendar, since it is then properly hidden.

The easy solution is to make sure the Datepicker div is invisible at startup, by simply hiding it at the end of the object initializer:

function Datepicker() {

Until this is fixed, you can call the following after the Datepicker behavior has been added to your fields:


I am attaching two files to help easily reproduce the issue:

This will create the behavior. The difference will only be visible if you have a small enough window, since scroll bars will appear. Go into the date input field and press [Shift] or [Ctrl] to trigger this.
Wraps the other file into an iframe so you don't have to play with window size to reproduce the issue.

This was introduced by changes for #3861. #5970 could be related, though the suggested solution there introduced other issues for me.

Change History (7)

comment:1 Changed 6 years ago by kbwood

Or you can hide it using CSS:

#ui-datepicker-div { display: none; }

comment:2 Changed 6 years ago by maz

Here is a new set of files with a different solution. Testing in MSIE 7 indicates the above solutions (Javascript and CSS) do not work, since they introduce grayed-out scroll bars into the frame.

I opted for this instead:

    $('#dateField').unbind('keyup').keyup(function() {
        if ($.datepicker._datepickerShowing) {
            $.datepicker._doKeyUp({ target: this });

This additional check should be built into the Keyup handler set up by Datepicker. I don't see a need to update the calendar on "keyup", if the calendar is not shown.

See all three versions on this page.

The first frame implements no special behavior. The second frame uses the CSS in the above comment. The third version overrides the keyup event. Test this using MSIE 7 (I am not able to test with MSIE 8 at this time), by going into the text field of each frame, and hitting the [Ctrl] key.

Note that it's probably a good idea to hide the div in any case.

comment:3 Changed 6 years ago by maz


Last edited 6 years ago by maz (previous) (diff)

comment:4 Changed 4 years ago by scottgonzalez

  • Milestone changed from TBD to 1.11.0

comment:5 Changed 4 years ago by mikesherov

  • Milestone changed from 1.11.0 to 1.8.7
  • Resolution set to fixed
  • Status changed from new to closed

This was fixed in 1.8.7 with CSS:

comment:6 Changed 4 years ago by mikesherov

  • Milestone 1.8.7 deleted
  • Resolution fixed deleted
  • Status changed from closed to reopened

comment:7 Changed 4 years ago by mikesherov

  • Resolution set to duplicate
  • Status changed from reopened to closed

Duplicate of #4111.

Note: See TracTickets for help on using tickets.