GEOG 863:
Web Application Development for Geospatial Professionals

7.2.6 Date

PrintPrint

7.2.6 Date

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 here:

See the Pen Date Picker by Jim Detwiler (@jimdetwiler) on CodePen.

Note that this example is modeled after this sample from Esri, which used to include date pickers, but no longer does for whatever reason.

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.

Now have a look at how the selected dates are retrieved in the buildDefinitionQuery() function. First, just above the function, references to the dateFrom and dateTo elements are obtained using getElementById().  The selected dates are then retrieved by reading the value property and inserted into an expression that will be used to identify records in which the Date field has a value that falls between the two selected dates.  (It appears that the values as strings are being converted to Date objects in the syntax of the underlying geodatabase.)

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