How to: Use Moment.js in a Calculator

Overview

The Calculator component doesn't only accept Excel formulas, it can also use formulas from MomentJS A JavaScript date library that lets you parse, validate, manipulate, and reformat dates.. Moment.js is a JavaScript date library that lets you parse, validate, manipulate, and reformat dates. In Unqork, you can use Moment.js in a Calculator to manipulate values from Date Input components. In this how-to guide, you'll learn how to use 10 different Moment.js formulas in the Calculator component.

What You'll Learn

In this article, you'll learn how to use Moment.js formulas in a Calculator component, perform calculations with Date Input component values, and reformat Date Input values for display.

What You Need

For this use case, you'll need:

Configure the Date Input Components

The 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

Label Text
dateOne

Date One

dateTwo

Date Two
3. From each component's configuration window, click the Data Icon Data tab.
4. Under Data Storage, set Store Date Only in each component to Toggle On icon (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. Enabling Store Date Only excludes this timestamp from the stored date.

5. Save &  Close each Date Input Icon Date Input component as you add it.

Configure the Text Field Components

The Text Fields display the results of each formula used in the Calculator component.

1. Drag and drop 10  Text Field 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 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. Save &  Close each  Text Field component as you add it.

Configure the Calculator Component

Now that you have your input and display fields, add the Calculator component. In this Calculator, you'll configure 10 formulas in the Outputs table. These formulas highlight different ways to use Moment.js. They can:

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

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

  • Perform calculations between multiple stored dates. For example, calculating the number of days between 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. From the component's configuration window, click Data Icon Actions.
4. In the Inputs Enter inputs components and actions you want the component to perform. table, enter the following:
Property ID

Alias

Required

dateOne

A

dateTwo

B

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

5. In the Outputs Enter outputs components and actions you want the component to perform. table, complete the Property ID and Formula columns as follows:
Property ID

Formula

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. After configuring a module, click Preview in the Module Editor to interact with the module in Express View preview.

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.

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.

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.

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.

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.

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.

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.

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.

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.

6. Click Save & Close.

Configure the Button Component

Next, you'll add the Button component that triggers your Calculator.

1. Drag and drop a Decisions 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 Pull Date.
4. Select Event as the Action Type.
5. In the On Click, enter calcDate.

6. Click Save & Close.
7. Save your module.

Now you're ready to test your module. Open your module in Express View and enter some dates in your Date Input fields. Click the Pull Date button, and see what displays in your Text Fields. Adjust the Moment.js formulas in your Calculator to get more familiar with using Moment.js.

Resources