Date Input Component
Overview
The Date Input component lets your end-user End-users, also known as Express 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 Coordinated Universal Time (UTC) is a standard, globally-accepted timezone used to regulate clocks and time around the world.. 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.
About the Configuration Window
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.
Display Settings
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. |
Contextual Help
|
Setting |
Description |
|---|---|
|
Tooltip |
A short hint that displays when an end-user positions their cursor over the |
(Default State Options
|
Setting |
Description |
|---|---|
|
Hide Label |
Setting Hide Label to (ON) hides Label Text from displaying in Express View Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module 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 End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. data saved in a browser and uses it to fill relevant fields. For example, in Express View Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module 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 End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. interact with the component. Choose from the following options:
|
Data Settings
Data Storage
|
Setting |
Description |
|---|---|
|
Store Data in Database |
The Store Data in Database setting affects how data persists through your application. When set to (ON), Unqork stores values entered into the field to the database (server-side submission). This occurs in three scenarios:
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 (OFF) when you don’t want to store the values from this field in the database. 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. 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 (ON) in Module Settings, only values from fields with Store Data in Database enabled are tracked. |
|
Store Date Only |
Unqork stores all dates in ISO8601 format with or without the timestamp based on the Store Date Only setting. That way, dates are always passed as either YYYY-MM-DDThh:mm:ss.sssZ or YYYY-MM-DD when using logic components. When set to (ON), the system only stores the selected date. By default, Store Date Only is set to (OFF). |
Actions Settings
Triggers
|
Setting |
Description |
|---|---|
|
Trigger |
To set up a trigger, enter the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. of your chosen logic component into this field. When the end-user performs an action on the current component, the triggered component fires. |
Validation Settings
Valid Date
|
Setting |
Description |
|---|---|
|
Error Message |
Displays as a custom error message when the end-user enters an invalid date. |
User Input
|
Setting |
Description |
|---|---|
|
Required |
When set to (ON), the end-user must enter a value in the component's visible fields. When set to (OFF), the input is optional. By default, Required is set to (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. |
Advanced Settings
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 |
Specifies the from date. Use the drop-down menu to apply more restrictions to the beginning of your date range:
|
|
Maximum Date Error Message |
Displays as a custom error message when the end-user enters an invalid date. |
|
Until |
This field displays on selection of the Between Dates setting. Use the drop-down menu to apply more restrictions to the beginning of your date range:
|
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. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. 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. Some browsers might not support this setting. By default, the Disable Browser Autofill toggle is set to (OFF). |
|
Disable Calendar View |
(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.
Configure the Date Input Component
| 1. | In the Module Builder, drag and drop a  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. | 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 Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder 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 (ON).
Overview
The Date Input component lets your end-user End-users, also known as Express 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 Coordinated Universal Time (UTC) is a standard, globally-accepted timezone used to regulate clocks and time around the world.. 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.
About the Configuration Window
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.
Display Panel
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 Hide Label to (ON) hides Label Text from displaying in Express View Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.. Your Label Text still displays in the Module Builder. By default, this setting is set to (OFF). |
|
Read Only View |
When set to (ON), the component is display-only. If another component sends content to the field, the end-user can view that content. Otherwise, end-users see the word None. By default, the Read Only View toggle is set to (OFF). |
|
Disable User Input |
When set to (ON), end-users cannot 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, Disable User Input 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). |
Contextual Help
|
Setting |
Description |
|---|---|
|
Tooltip |
A short hint that displays when an end-user positions their cursor over the |
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. 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 /. |
Autocomplete
| Setting | Description |
|---|---|
|
Autocomplete |
Autocomplete detects end-user End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. data saved in a browser and uses it to fill relevant fields. For example, in Express View Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module 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. |
Data Panel
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 way, dates are always passed as either YYYY-MM-DDThh:mm:ss.sssZ or YYYY-MM-DD when using logic components. When set to (ON), the system only stores the selected date. By default, Store Date Only is set to (OFF). |
|
Store Data in Database |
The Store Data in Database setting affects how data persists through your application. When set to (ON), Unqork stores values entered into the field to the database (server-side submission). This occurs in three scenarios:
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 (OFF) when you don’t want to store the values from this field in the database. 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. 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 (ON) in Module Settings, only values from fields with Store Data in Database enabled are tracked. |
Actions Panel
Triggers
|
Setting |
Description |
|---|---|
|
Trigger |
To set up a trigger, enter the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. 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
User Input
|
Setting |
Description |
|---|---|
|
Required |
When set to (ON), the end-user must enter a value in the component's visible fields. When set to (OFF), the input is optional. By default, Required is set to (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
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 OnlySpecify a date range where end-users only select dates that exist on or after the current date.
|
Past OnlySpecify a date range where end-users only select dates that exist on or before the current date.
|
Before a DateSpecify a date range where end-users can only select dates that exist before the chosen date specified in the Choose Date field.
|
After a DateSpecify 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.
|
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 |
Specifies the from date. Use the drop-down menu to apply more restrictions to the beginning of your date range:
|
|
Maximum Date Error Message |
Displays as a custom error message when the end-user enters an invalid date. |
|
Until |
This field displays on selection of the Between Dates setting. Use the drop-down menu to apply more restrictions to the beginning of your date range:
|
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. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. 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. Some browsers might not support this setting. By default, the Disable Browser Autofill toggle is set to (OFF). |
|
Disable Calendar View |
Set to (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 (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.
Configure the Date Input Component
| 1. | In the Module Builder, drag and drop a 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. |
| 5. | Under Data Storage, set Store Date Only to  (ON). |
| 6. | Click  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 (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 your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder 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 (ON).
Resources
