Print8.4.3 DateTextBox
Earlier in the lesson we saw that dates can be obtained from the user via the date input type built into HTML5. Another date picker option is Dojo's DateTextBox dijit. This dijit is demonstrated in the CodePen below:
See the Pen Date Picker (Dojo DateTextBox) by Jim Detwiler (@jimdetwiler) on CodePen.
Looking at the HTML, 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 required attribute specifies whether or not the user should be allowed to skip over that UI element.
- 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.
In the JS code, the setDates() function is immediately called upon when the page loads. That function creates two Date objects: one representing today and the other 30 days prior to today. Those JS Date objects are used to set the dijits' initial values and constraints (min and max possible dates). This is in contrast to the earlier date picker example, in which those attributes were set to strings in yyyy-mm-dd format.
The rest of the app works exactly the same as the earlier date picker example.
And paralleling the earlier page that covered the HTML5 date picker, below is an example built on the 2019 wildfire layer in which the DateTextBox dijit's values and constraints have been hard-coded within the HTML.
See the Pen Date Picker (Dojo DateTextBox dynamic) by Jim Detwiler (@jimdetwiler) on CodePen.