Demo dojomino.dijit.form.DateTextBox

Date:

How did we build this date picker?

You've already seen the standard version of this with the DemoDateTextBox demo, which is a straight implementation of Dojo's dijit.form.DateTextBox. But a Scott pointed out in the blog comments about that demo, there's no visual indicator that this is a clickable field that will give you a calendar.

This demo does that.

First, we extended the dijit.form.DateTextBox with our own class called dojomino.dijit.form.DateTextBox. The code for that was pretty simple. Here is dojomino\dijit\form\DateTextBox.js:

dojo.provide("dojomino.dijit.form.DateTextBox");

dojo.require("dijit.form.DateTextBox");

dojo.declare('dojomino.dijit.form.DateTextBox', dijit.form.DateTextBox,

{

templatePath : dojo.moduleUrl("dojomino", "dijit/form/template/DateTextBox.html"),

templateString : ''

});

This simply extends the dijit.form.DateTextBox and provides a new HTML template for the widget.

Next, we created the dojomino/dijit/form/template/DateTextBox.html file that's indicated above, and it looks like this:

<div class="dijit dijitReset dijitInlineTable dijitLeft"

id="widget_${id}"

dojoAttachEvent="onmouseenter:_onMouse,onmouseleave:_onMouse,onmousedown:_onMouse" waiRole="presentation"

><div style="overflow:hidden;"

<span class="dijitReset dijitCalendarIcon"></span>

<div class="dijitReset dijitValidationIcon"><br></div

><div class="dijitReset dijitValidationIconText">Χ</div

><div class="dijitReset dijitInputField"

><input class="dijitReset" dojoAttachPoint='textbox,focusNode' dojoAttachEvent='onfocus:_update,onkeyup:_update,onblur:_onMouse,onkeypress:_onKeyPress' autocomplete="off" type='${type}' name='${name}'

></div

></div>

This code was copied verbatim from the ValidationTextBox.html template that dijit.form.DateTextBox ultimately uses. To that code, we added the one span element shown in bold above.

Since dijitCalendarIcon isn't a CSS class that is in the standard themes. We created a new dojomino/dijit/themes/wfs/wfs.css file that contains the definition for dijitCalendarIcon:

.dijitCalendarIcon {

/* prevent height change when widget goes from valid to invalid state, and

* workaround browser (FF and safari) sizing bugs when last table column is empty or display:null

float: right;

width: 16px;

height: 16px;

background-repeat: no-repeat;

background-image: url('images/calendar-icon.gif');

}

.dijitError .dijitCalendarIcon {

display: none;

}

We take advantage of the existing css definition for the Validation Icon which is normally hidden, and in it's place we substitute a calendar icon. When there is an error, which would display the normal dijit validation icon, we turn the display of our calendar icon off.

Finally, to our demo page, we add an import statement for our new wfs.css theme, and it's complete.

An interesting thing learned along this path, was that the dojo source code trees have a templatePath variable that point to external html template files. This is nice in development mode because it allows you to write the html in a separate file with good whitespace and it's very readable. When you go to production and produce a build, the external template files become internal strings in the dojo object which negates the need for an AJAX call to load the external html template.

For the purposes of this demo, we're still running from source code, and not a custom build, so if you're watching firebug, you'll actually see the html template file get loaded.