GEOG 863:
Web Application Development for Geospatial Professionals

7.4.3 DateTextBox


7.4.3 DateTextBox

Esri's 911 call hotspot analysis sample, seen earlier in the discussion of obtaining dates from the user, previously made use of Dojo’s DateTextBox dijit.  At version 4.9 of the API, the sample switched to using the date input type built into HTML5.  I suspect that the dijit was used because the HTML5 date input element was not supported by all of the major web browser and that browser support is now more widespread.  In any case, I will continue to include this page on the DateTextBox dijit in the event that you want to read about a different date picker option.

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.)