GEOG 863:
Web Application Development for Geospatial Professionals

7.2.6 Date

PrintPrint

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. HTML5 introduced a new input type of Date that provides a date picker, and its use is demonstrated in this sample from Esri.

Looking at the HTML at the bottom of the sample, you should note the following:

  • The two input elements are assigned a type="date" attribute. 
  • An id is assigned to each element so that it can be manipulated with JS code. 
  • The min and max attributes can be used to limit the dates available to the user.
  • The required attribute specifies whether or not the user should be allowed to skip over that UI element.
  • The pattern attribute (which can be used for other input types as well) is used to validate the user's entry/selection.  It uses a regular expression, which in this case requires that the input be 4 digits, a dash, 2 digits, a dash, then 2 more digits (i.e., the date value in yyyy-mm-dd format).  Note that while the date appears in a mm/dd/yyyy format, its value is actually of the yyyy-mm-dd form.  

Now have a look at how the selected dates are retrieved in the buildDefinitionQuery() function (lines 122-139). First, just above the function, references to the fromDate and toDate elements are obtained using getElementById().  The selected dates are then retrieved by reading the value property.  Those values as text strings are converted to JS Date objects and then formatted using a JS library called Moment.js.  The formatted dates are then inserted into an expression that identifies records in which the Date field has a value that falls between the two selected dates.  

Note how an array is used to hold both this date expression and an expression that identifies desired values in a field called Day.  These two expressions are merged together (separated by the string " AND ") through the use of the join() array method.  (It may seem odd that the "Day" expression includes all seven days of the week.  I suspect it's included so that the app could be easily modified to display records from certain days of the week, such as SAT and SUN.)