How to: Use Moment.js in a Calculator Component

 

Overview

Use Moment.js formulas in a Calculator component to manipulate values from Date Input components. Moment.js A JavaScript date library that lets you parse, validate, manipulate, and reformat dates. is a JavaScript JavaScript is an object-oriented computer programming language. It is most-commonly used for interactive effects in the browser. date library that lets you parse, validate, manipulate, and reformat dates. In this how-to guide, you'll learn how to use ten adifferent Moment.js formulas in the Calculator component.

Configure the Date Input Components

These Date Input components provide the inputs used by your Calculator component.

1. In the Module Builder, drag and drop two Date Input Icon Date Input components 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. and Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. fields for each Date Input component, enter the following:

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

Label Text
dateOne

Date One

dateTwo

Date Two
3. In each component's configuration menu, navigate to the Data settings.
4. Under Data Storage, set Store Date Only for each component to (ON).

TIP  By default, dates store in ISO 8601 A standard format for representing dates and times. ISO 8601 format is represented in the following order: year, month, day, hour, minutes, seconds, and milliseconds. format with a timestamp of midnight UTC Coordinated Universal Time (UTC) is a standard, globally-accepted timezone used to regulate clocks and time around the world.. Enabling Store Date Only excludes this timestamp from the stored date.

A static image displaying the Date Input component's Store Date Only setting.

5. Click Save Component for each Date Input Icon Date Input component as you add it.

Configure the Text Field Components

These Text Field components display the results of each formula used in the Calculator component.

1. Drag and drop ten  Text Field components onto your canvas, placing them below the Date Input Icon Date Input components.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. fields for each component, enter the following:

Text Field

Property ID

Label Text

1

dateToday

Date TODAY()

2

 dateTodayFormat

Today's Date:

3

dateOneFormat

Date One (MM/DD/YY):

4

dateDiffDateOne

Difference between today's date and Date One in days:

5

dateDiffDateOneWeeks

Difference between today's date and Date One in weeks:

6

dateDiffDateOneMonths

Difference between today's date and Date One in months:

7

dateDiffDateOneYears

Difference between today's date and Date One in years:

8

dateDiffDateOneSeconds

Difference between today's date and Date One in seconds:

9

dateDiffDateOneDateTwo

Difference between Date One and Date Two in days:

10

dateOneAddThree

Date One plus three days:
3. Click Save Component for each  Text Field component as you add it.

Configure the Columns Component

To reduce the length of the module 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. 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., use a Columns component to sort the ten Text Field components between two columns.

A static image displaying the Columns component containing the Text Field components.

1. Drag and drop a Columns Component Icon Columns component onto your canvas, placing it below the dateTwoDate Input Icon Date Input component.
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 colDates.
3. Click Save Component.
4. Drag and Drop the ten  Text Field components into the colDates Columns Component Icon Columns component to match the table below:

Column 1

 Column 2

dateToday

dateDiffDateOneSeconds

dateTodayFormat

dateDiffDateOne

dateOneFormat

dateDiffDateOneWeeks

dateDiffDateOneDateTwo

dateDiffDateOneMonths

dateOneAddThree

dateDiffDateOneYears

Configure the Calculator Component

Now that you have your input and display fields, add the Calculator component. In this Calculator component, you'll configure ten formulas in the Outputs table Enter outputs components and actions you want the component to perform.. These formulas highlight different ways to use Moment.js to:

  • Reformat dates. For example, reformatting the default YYYY-MM-DD format to MM/DD/YY.

  • Perform calculations on a stored date. For example, adding a specific number of days to a stored date.

  • Perform calculations between multiple stored dates. For example, calculating the number of days betweentwo dates.

1. Drag and drop a  Calculator component onto your canvas, placing it below the dateTwo Date Input Icon Date Input component.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. fields, enter calcDate.
3. Navigate to the component's Actions settings.
4. Next to Inputs & Outputs, click Edit. The Inputs & Outputs panel displays.
5. In the Inputs Enter inputs components and actions you want the component to perform. table, enter the following:
# Property ID

Alias

Required

1

dateOne

A

☐ (unchecked)

2

dateTwo

B

☐ (unchecked)

NOTE  This syntax assigns specific aliases to the dateOne and dateTwo Date Input Icon Date Input components. Now you can use A or B in the Moment.js formulas instead of entering dateOne or dateTwo.

A static image displaying the Calculator component's Inputs and Outputs table.

6. In the Outputs Enter outputs components and actions you want the component to perform. table, complete the Source and Formula columns as follows:
# Source

Formula

1

dateToday

=TODAY()

NOTE  Returns the current date formatted to show the day of the week, the date, time stamp, and timezone. For example, Thu Sep 23 2020 16:01:36 GMT-0400 (Eastern Daylight Time) in the 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. 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. preview.

2

dateTodayFormat

=moment(moment(),'format', 'MM/DD/YYYY')

NOTE  Returns the current date formatted as MM/DD/YYYY. moment() calculates the current date at any given time. For example, 09/23/2020 in the Express View preview.

3

dateOneFormat

=moment(moment(A),'format', 'MM/DD/YY')

NOTE  Returns the dateOne value formatted as MM/DD/YY. Remember, we assigned the Alias A to the dateOne value. For example, 01/01/20 in the Express View preview.

4

dateDiffDateOne

=moment(moment(),'diff',moment(A),'days')

NOTE  Calculates the difference between today's date and the dateOne value. The result shows in days. For example, 266 in the Express View preview.

5

dateDiffDateOneWeeks

=moment(moment(),'diff',moment(A),'weeks')

NOTE  Calculates the difference between today's date and the dateOne value. The result shows in weeks. For example, 38 in the Express View preview.

6

dateDiffDateOneMonths

=moment(moment(),'diff',moment(A),'months')

NOTE  Calculates the difference between today's date and the dateOne value. The result shows in months. For example, 8 in the Express View preview.

7

dateDiffDateOneYears

=moment(moment(),'diff',moment(A),'years')

NOTE  Calculates the difference between today's date and the dateOne value. The result shows in years. For example, 0 in the Express View preview.

8

dateDiffDateOneSeconds

=moment(moment(),'diff',moment(A),'seconds')

NOTE  Calculates the difference between today's date and the dateOne value. The result shows in seconds. For example, 23036496 in the Express View preview.

9

dateDiffDateOneDateTwo

=moment(moment(A),'diff',moment(B),'days')

NOTE  Calculates the difference between the dateOne and dateTwo values. The result shows in days. For example, 7 in the Express View preview.

10

dateOneAddThree

=moment(moment(moment(A),'add',3,'days'),'format','MM/DD/YYYY')

NOTE  Adds 3 days to the dateOne value. Returns the adjusted date as MM/DD/YYYY. For example, 01/04/2020 in the Express View preview.
7. Click Save Component.

Configure the Button Component

Lastly, you'll configure a Button component to trigger your Calculator component.

1. Drag and drop a Button component Icon Button component onto your canvas, placing it below the calcDate  Calculator component.
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 btnSubmit.
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 Calculate Dates.
4. Navigate to the component's Actions settings.
5. Set the Action Type to Event.
6. In the On Click, enter or select calcDate.

A statici mage displaying the Button component's Trigger settings.

7. Click Save Component.
8. Save your module.

Preview your module in Express View and enter some dates in the Date Input fields. Click Calculate Dates and to display the values in the text fields. Adjust the Moment.js formulas in the Calculator component to become more familiar with Moment.js.

Resources