I’ve been doing some research on jQuery’s Datepicker plugin. I was curious as to how he created his nodes and modified them.
What I found was interesting:
@ 113: this.dpDiv = bindHover($('<div id="' + this._mainDivId + '" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>'));
The bindHover function is not really important to consider, it takes the reference and delegates a few events such as mouseover etc.
What is interesting is the id attribute, it says this._mainDivId so I checked it out and…
@ 34: this._mainDivId = 'ui-datepicker-div'; // The ID of the main datepicker division
There is not use of a unique id, it is a set id. I figured it would have to be unique because often times there are more than one datepickers used on a page.
This is jQuery, it MUST be good practice… I just can’t figure out why or how this is helpful.
Glancing at the source, it looks like though there may be many datepicker instances on a page, only one datepicker window is open at a time (see example). Every datepicker uses the same
dpDivelement to show its content, so that div is given a single unique ID.