Date Input Component

The Date Input component lets your end-user enter or select a date from a specific date range. By default, all Date Input entries store using the YYYY-MM-DD format and include a timestamp of midnight (00:00) in Coordinated Universal Time. This ensures all date-related data stores in a consistent and standardized way.

Here are some examples of when you would use a Date Input component:

  • Collecting date of birth.

  • Setting a minimum age for an application.

  • Noting a date of service or period of employment.

  • Recording the date of signing.

  • Setting an effective date (from/to), first date, or last date.

To learn more about general component settings and those that display when a component is associated with Data Models, view our General Component Settings article.

Field Text

A static image dispaying the Date Input component's Display settings.

Setting

Description

Label Text

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case.

Placeholder Text

A short prompt telling end-users the expected value of an input field. For example, Enter your Social Security Number. Placeholder Text displays inside the input field until the end-user begins an entry.

Contextual Help

Setting

Description

Tooltip

A short hint that displays when an end-user positions their cursor over the Questionmark Icon (Tooltip) icon. Tooltips can display across more than one line.

Default State Options

Setting

Description

Hide Label

Setting Hide Label to  (ON) hides Label Text from displaying in Express View. Your Label Text still displays in the Module Builder.

By default, this setting is set to (OFF).

Hide Field

Displays or hides the component from view. Setting Hide Field to  (ON) hides the component in Express View. Setting it to (OFF) displays the component. The component is always visible in the Module Builder.

By default, Hide Field is set to (OFF).

Formatting

Setting

Description

Autocomplete

Autocomplete detects end-user data saved in a browser and uses it to fill relevant fields. For example, in Express View, if there is a field labeled First Name, and an end-user clicks into the field, the end-user's browser autofill function suggests first names saved to the browser.

By default, Autocomplete is set to  (ON).

Autocomplete Value

When Autocomplete is set to  (ON), the Autocomplete Value drop-down displays. Use this drop-down to select an ARIA role to better direct the autocomplete feature when an end-user clicks on a field. For example, selecting address-line1 helps the browser determine that the field should autofill with the first line of an address.

To learn more about supported ARIA values in Unqork, view our Autocomplete reference guide.

Date Format

Use this setting to change the format of the Placeholder Text or any dates selected in Calendar View.

Possible values are m, d, y, and Y (use each value only once). For example, Ydm, ymd, or mY. Entering ymd results in a date format of YY/MM/DD. Entering Ymd results in a date format of YYYY/MM/DD.

This setting only affects how the date displays in Express View. Values store in ISO 8601 format.

Display (+/-) Years from the Current Date

Sets the maximum number of years available in the date picker calendar.

Field Delimiter

Delimiters show the breaks between the month, day, and year in a date. Common delimiters include a period (.), slash (/), or hyphen (-). By default, the Field Delimiter is set to /.

Input Behavior

Setting Description

Input Behavior

Controls how end-users interact with the component. Choose from the following options:

  • Enable User Input: Allow end-users to view and enter data in this field.

  • Disable User Input: Prevents end-users from entering data in the field, but lets them view it. In the Module Builder, the field’s background displays as gray. In Express View, when end-users hover over the field, their cursor displays with a prohibited symbol.

  • Read Only - Legacy: Prevents end-users from entering data and replaces the field with the component’s data value. If no value is provided, the component displays None.

  • Read Only - Accessible: Makes the field non-editable and applies the readonly HTML attribute, which notifies screen readers that the field cannot be modified.

Set up a Date Input component that collects date of birth information. Use Validation settings to require the end-user to be older than 18 years of age, but younger than 117 years.

These instructions assume that you have an open module saved with a title.

Configure the Date Input Component

A static image displaying the Date Input components configuration window. The "Restrict Date Selection" To setting is highlighted and filled out.

1. In the Module Builder, drag and drop a Date Input Icon Date Input component onto your canvas.
2. In the Property ID field, enter dateOfBirth.
3. In the Label Text field, enter Date of Birth.
4. Navigate to the component's Data settings.
5. Under Data Storage, set Store Date Only to  (ON).
6. Navigate to the component's Validation settings.
7. Under User Input, set Required to  (ON).
8. Navigate to the component's Advanced settings.
9. In the Restrict Date selection to drop-down, select Between Dates.
10. In the Minimum Date Error Message field, enter You must be younger than 117 years of age to apply..
11. In the From drop-down, select Relative Date. The relative date field and Days/Months/Years drop-down display.
12. In the Relative Date field, enter -117.
13. From the Days/Months/Years drop-down, select Years.
14. In the Maxmimum Date Error Message field, enter You Must be at least 18 years of age to apply..
15. In the Relative Date field, enter -18.
16. From the Days/Months/Years drop-down, select Years.
17. Under Additional Styling, set Disable Calendar View to  (ON).
18. Click Save Component.
19. Save your module.

Once implemented, your Date Input component looks like the following in Express View:

The data structure of a Date Input is a key/value pair. The key is the Property ID name of the component, and the value is stored as a string. By default, the value includes the date and timestamp. To remove the timestamp from the stored value, set the Store Date Only setting to  (ON).

A static image of the Console Inspect view, the data structure for a saved Date Input component is displayed.