GEOG 863
GIS Mashups for Geospatial Professionals

7.4.3 DateTextBox


Many apps require the user to input one or more dates. It is possible to acquire dates through a plain text box. However, using a "date picker" widget can make the entry task a bit less tedious for the user, and just as importantly, help ensure that the date is supplied in the correct format. Dojo’s DateTextBox dijit is one of many such widgets out there and its use is demonstrated in this sample from Esri.

Looking at the HTML at the bottom of the sample, you should note that the widget is actually created as an input element of type="text" (i.e., a “plain” text box). However, it has a dojotype attribute setting of dijit/form/DateTextBox, which is what causes it to be rendered as a calendar. Other attribute settings to note:

  • The string assigned to the value attribute specifies the date that will be selected in that element by default.
  • The required attribute specifies whether or not the user should be allowed to skip over that UI element.
  • The constraints attribute allows for the setting of a min and max date. You’ll note that dates outside of that range can still be viewed through the widget, but they’ll have a line through them and cannot be selected.
  • Instead of being set to a function, the onChange attribute of the fromDate dijit is set to a single line of JS code. This is a nice shortcut that also makes your code a bit easier to interpret. In this case, it dynamically sets the min date of the toDate dijit equal to whatever date was selected in the fromDate dijit, making it impossible for the user to select a toDate earlier than the fromDate.

Now have a look at how the selected dates are retrieved in the buildDefinitionQuery() function (lines 147-154). The fromDate is obtained using the expression registry.byId('fromDate').value, for example. We’ve seen how to get references to DOM nodes using the regular JS DOM (document.getElementById) and Dojo’s dom module (dom.byId), but here is still another way. As explained in Dojo’s documentation, using registry.byId is necessary when you want to work with one of their dijits.

Finally, the two dates are formatted using the format() method in the dojo/date/locale module. This method takes a JS Date as its first argument and an object literal as its second. The full list of supported attributes for that second argument is listed in the documentation. Here, the selector attribute is set to 'date' (it would be set to 'time' to format a time) and the datePattern attribute to the format that is expected by the geoprocessing service being utilized by the app. (More on these services in the next lesson.)