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.

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

Resources

• Modify the Date Input component using the toolbar settings.

• Cheatsheet: Manipulating Dates with Moment.js.

• Introduction to Primary Field Components.

 

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.

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.

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

• Modify the Date Input component using the toolbar settings.

• Cheatsheet: Manipulating Dates with Moment.js.

• Introduction to Primary Field Components.