Date Input Component

Estimated Reading Time:  13 minutes

Overview

The Date Input component lets your end-user End-Users are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. 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 (UTC). 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 date of service or period of employment.

  • Recording date of signing.

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

What You'll Learn

After completing this article, you’ll know when to use a Date Input component, how to configure its settings, and how to use it in an Unqork application.

About the Configuration Window

Once you drop a component onto the Module Editor canvas, the following settings windows display: 

General

A static image of the Date Input Component's Configuration window.

Setting

Description

Property ID

A Property ID is the unique field ID used by Unqork to track and link components in your module.

The Property ID is how the software identifies your component. Using Property IDs lets you link components, creating logic-based configurations and API APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services. calls.

Property IDs must use camel case A naming convention for computer programming. Use camelCase for Property IDs, for example: newUser, lastName, & rdoButton. (stylized as camelCase) without spaces or punctuation.

Notes

Select this tab to display the component's Notes area. You can use notes to keep your teammates informed.

The Notes editor offers a semi-WYSIWYG (What You See is What You Get) content editor. Built to look like a word processor, this editor lets you create, edit, and format your notes. Notes save when saving the component.

Display Icon Display

Select this tab to manage your component's display settings.

Data Icon Data

Select this tab to manage your component's data settings.

Actions Icon Actions

Select this tab to manage your component's actions settings.

Validation Icon Validation

Select this tab to manage your component's validation settings.

Advanced Icon Advanced

Select this tab to manage your component's advanced settings.

Permissions Icon Permissions

Select this tab to see the RBAC RBAC (Role-Based Access Control) is a method to control system access for authorized users. The role in RBAC refers to the levels of access employees have to a network. (role-based access control) settings of the component.

Field Tag Icon Field Tags

Assign components one-word labels to help organize, identify, and group the components in your application.

Consider an example from the API Specification Snippet: Field Tags are applied to Hidden components in the panelRequest and panelResponse Panels. The Field Tags identify the data type of parameters included in the API APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services. request and response. The API Docs Dashboard tool populates with information about each parameter’s data type, identified by the Field Tag.

Field Tags act as a type of Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. group and let you group components for configuration purposes. Field Tags let you target two or more components using a simple logic component.

For example, add the Field Tag tagForDecision to multiple components in your module. Open the Inputs table of a Decisions component and reference the tagForDecision Field Tag as the input of the Decisions component. The output of the Decisions component then affects all components with the tagForDecision Field Tag.

Save your Field Tags by pressing Enter (Return) or adding a comma after each entry.

Shortcuts Icon Shortcuts

Select this tab to open the list of supported keyboard shortcuts you can use in the component settings modal. Keyboard shortcuts include:

  • Cmd + S (Mac) / Ctrl + S (PC): Save and close the component settings modal.

  • Cmd + G (Mac) / Ctrl + G (PC): Opens a search window to find specific fields and settings in the component settings modal.

  • Tab: Tab to the next field or setting in the component settings modal. This keyboard shortcut tabs left to right and top to bottom.

  • Shift + Tab: Tab to the previous field or setting in the component settings modal. The keyboard shortcut tabs from right to left and bottom to top.

  • Enter (Return): When tabbing to a Tooltip Icon (tooltip), press Enter (Return) to display the field or setting tooltip. Press Enter (Return) again to hide the tooltip.

Additional keyboard shortcuts:

  • Drop-down menus: When you Tab to a settings drop-down, use the keyboard's Up-Arrow Icon (up)/ Down-Arrow icon (down) arrows to make a selection. Then, press Enter (Return) to confirm the selection.

Documentation IconDocumentation

Select this tab to access the component documentation in Unqork's In-Product Help.

Cancel

Click this button to undo any unsaved configuration changes and return to the canvas.

Save & Close

Click this button to save all settings as configured and return to the canvas.

Display Panel

A static image dispaying the Date Input component's Display settings.
(click to expand image)

Field Text

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.

Default State Options

Setting

Description

Hide Label

Setting the Hide Label toggle to Toggle On Icon (ON) stops Label Text from displaying in Express View. Your Label Text still displays in the Module Editor.

By default, the Hide Label toggle is set to Toggle Off icon (OFF).

Read Only View

When set to Toggle On Icon (ON), the component is display-only. If another component pushes content to the field, the end-user sees that content. Otherwise, end-users see the word None.

By default, the Read Only View toggle is set to Toggle Off icon (OFF).

Disable User Input

When set to Toggle On Icon (ON), end-users can’t interact with or edit the Express View's input field or element. When end-users hover over the field, their cursor changes to alert them to the status change.

By default, the Disable User Input toggle is set to Toggle Off icon (OFF).

Hide Field

Shows or hides the component from view. Setting the Hide Field toggle to Toggle On Icon (ON) hides the component in Express View. Setting the toggle to Toggle Off icon (OFF) shows the component. The component is always visible in the Module Editor.

By default, the Hide Field toggle is set to Toggle Off icon (OFF).

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.

Formatting

Setting

Description

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.

NOTE  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 /.

Data Panel

A static image dispaying the Date Input component's Data settings.
(click to expand image)

Data Storage

Setting

Description

Store Date Only

Unqork stores all dates in ISO8601 format with or without the timestamp based on the Store Date Only setting. That means dates should always be passed in using logic components as either YYYY-MM-DDThh:mm:ss.sssZ or YYYY-MM-DD.

When set to Toggle On icon (ON), the system only stores the selected date.

By default, Store Date Only is set to Toggle Off icon (OFF).

Store Data in Database

The Store Data in Database setting affects how data persists through your application. When set to Toggle On Icon (ON), Unqork stores values entered into the field to the database (server-side submission). This occurs in three scenarios:

  • Navigating between Panels in a Navigation component. On navigation between pages (Panels), the component’s value saves to the database.

  • Triggering a module save event using a Button component with an Action Type of Save.

  • Navigating between screens of a workflow. On navigation between screens, the component’s value saves to the database.

NOTE  By default, workflows persist data from all fields in the client-side submission when navigating between screens. However, only values from fields with Store Data in Database enabled store in the server-side submission.

Set the toggle to Toggle Off icon (OFF) when you don’t want to store the values from this field in the database.

NOTE  When using a Plug-In to remote execute a module, ensure data moving between modules is persistent. You can optionally enable Store Data in Database for components in the source module. But any components in the API module whose values are included in an API response must have Store Data in Database enabled. When a component’s data is not persistent, the data isn't included in an API call's response. So, Plug-Ins or external services requesting data from the API module can't receive non-persistent data in the response. To learn more about Store Data in Database in the context of API modules, see the panelResponse Panel section of the API Specification Snippet article in our In-Product Help.

TIP  Store Data in Database also affects what data is tracked using Unqork’s built-in tracker. When the Enable Tracker and Track Value toggles are set to Toggle On Icon (ON) in Module Settings, only values from fields with Store Data in Database enabled are tracked.

Actions Panel

A static image dispaying the Date Input component's Actions settings.
(click to expand image)

Triggers

Setting

Description

Trigger

To set up a trigger, enter the Property ID of your chosen logic component into this field. When the end-user performs an action on the current component, the triggered component fires.

Validation Panel

A static image dispaying the Date Input component's Validation settings.
(click to expand image)

User Input

Setting

Description

Required

When set to Toggle On Icon (ON), the end user must enter a value in the component's visible fields. Set the toggle to Toggle Off icon (OFF) when an entry is optional.

By default, the Required toggle is set to Toggle Off icon (OFF).

Required Error Message

A custom error message that displays below a required field. The error message displays when the end-user tries to save or submit the module without completing the required field.

Valid Date

Setting

Description

Error Message

Displays as a custom error message when the end-user enters an invalid date.

Advanced Panel

A static image dispaying the Date Input component's Advanced settings.
(click to expand image)

Additional Validation Options

Restrict Date Selection To

The Restrict Date Selection To setting lets you set date restrictions to prevent end-users from choosing invalid values. For example, use the Restrict Date Selection To setting to require a minimum age for end-users, or to schedule for dates only in the future.

None

No validation restrictions apply, and end-users can select or enter any date into the Date Input component.

Future Only

Specify a date range where end-users only select dates that exist on or after the current date.

Setting

Description

Minimum Date Error Message

Displays as a custom error message when the end-user enters a date that exists after the current date.

Choose Date

All future dates of the current date are accepted. To choose a date in the future and to accept all dates after it, use the After a Date setting.
Past Only

Specify a date range where end-users only select dates that exist on or before the current date.

Setting

Description

Maximum Date Error Message

Displays as a custom error message when the end-user enters a date that exists before the current date.

Choose Date

All past dates of the current date are accepted. To choose a date in the past and to accept all dates that come before it, use the Before a Date setting.
Before a Date

Specify a date range where end-users can only select dates that exist before the chosen date specified in the Choose Date field.

Setting

Description

Minimum Date Error Message

Displays as a custom error message when the end-user enters a date that exists after the Choose Date value.

Choose Date

Enter or select a date the Date Input component validates against. If an end-user enters a date that exists after the Choose Date value, the Minimum Date Error Message value displays. End-users using Calendar View cannot select dates that exist after the Choose Date value.
After a Date

Specify a date range where end-users can only select dates that exist after the chosen date specified in the Choose Date field. End-Users can also select dates in the future.

Setting

Description

Maximum Date Error Message

Displays as a custom error message when the end-user enters a date that exists before the Choose Date value.

Choose Date

Enter or select a date the Date Input component validates against. If an end-user enters a date that exists before the Choose Date value, the Minimum Date Error Message value displays. End-users using Calendar View cannot select dates that exist before the Choose Date value.
Between Dates

The Between Dates setting offers the greatest flexibility for dictating which dates an end-user can choose.

Setting

Description

Minimum Date Error Message

Displays as a custom error message when the end-user enters an invalid date.

From

Specify the from date.

Using the drop-down menu, you can apply more restrictions to the start of your date range:

  • Absolute Date: Choose the oldest date the end-user is allowed to enter.

  • Relative Date: Choose the earliest relative date the end-user is allowed to enter. Accepts negative values.

  • Now: Sets the current date as your starting date.

  • +∞ (Past Only): Accepts all dates from the past. Same functionality as the Past Only setting.

Maximum Date Error Message

Displays as a custom error message when the end-user enters an invalid date.

Until

The Until field shows on selection of the Between Dates date restriction.

Using the drop-down menu, you can apply more restrictions (Absolute Date, Relative Date, Now, Future Only) to the start of your date range.

  • Absolute Date: Choose the earliest date the end-user is allowed to enter.

  • Relative Date: Choose the latest relative date the end-user is allowed to enter. Accepts negative values.

  • Now: Sets the current date as your starting date.

  • +∞ (Future Only): Accepts all dates in the future. Same functionality as the Future Only setting.

Additional Styling

Setting

Description

Custom CSS Class

Enter a Custom CSS Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users. Class to apply to your component. Use custom CSS to maintain a consistent look and feel if the field or element is part of a template or more than one module.

Updated CSS styling applies to all components that reference this custom class name.

Disable Browser Autofill

Setting the toggle to (ON) stops the browser from autofilling the field. When a user clicks the field, they must enter the value instead of having it autofill by the browser. Use this setting in all fields containing sensitive data.

NOTE  Some browsers might not honor this setting.

By default, the Disable Browser Autofill toggle is set to (OFF).

Disable Calendar View

Set to Toggle On icon (ON) to remove the calendar view widget from the field. With the calendar view widget removed, the end-user must manually type in the date.

By default, Disable Calendar View is set to Toggle Off icon (OFF)..

Adding a Date Input Component

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.

In this configuration, you need the following component:

  • 1 Date Input component

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 Editor, drag and drop a Date Input Icon Date Input component onto your canvas.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter dateOfBirth.
3. In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. field, enter Date of Birth.
4. Click Data Icon Data.
5. Under Data Storage, set Store Date Only to Toggle On icon (ON).
6. Click Advanced Icon Advanced.
7. In the Restrict Date selection to drop-down, select Between Dates.
8. In the Minimum Date Error Message field, enter You must be younger than 117 years of age to apply.
9. In the From drop-down, select Relative Date. The relative date field and Days/Months/Years drop-down display.
10. In the Relative Date field, enter -117.
11. From the Days/Months/Years drop-down, select Years.
12. In the Maxmimum Date Error Message field, enter You Must be at least 18 years of age to apply.
13. In the Relative Date field, enter -18.
14. From the Days/Months/Years drop-down, select Years.
15. Under Additional Styling, set Disable Calendar View to Toggle On icon (ON).
16. Click Save &  Close.
17. Save your module.

Once implemented, your Date Input component looks like the following in Express View Express View is how your end-user views you application. Express View also lets you preview your applications to test your configuration and view the styling. After configuring a module, click Preview in the Module Editor to interact with the module in Express View:

Structure of a Date Input Component's Data

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 Toggle On icon (ON).

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

Resources