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 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.
Contextual Help
Setting
Description
Tooltip
A short hint that displays when an end-user positions their cursor over the (Tooltip) icon. Tooltips can display across more than one line.
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).
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 /.
Data Panel
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:
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.
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.
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 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 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:
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. This setting aslo accepts negative values.
Now: Sets the current date as your starting date.
+∞(Past Only): Accepts all dates from the past.
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:
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. This setting also accepts negative values.
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.
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).
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
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.
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 (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.
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
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:
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.
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.
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 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:
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. This setting aslo accepts negative values.
Now: Sets the current date as your starting date.
+∞(Past Only): Accepts all dates from the past.
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:
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. This setting also accepts negative values.
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.
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).
(
Date Input component onto your canvas.
Data
(ON).
Advanced