---
title: "How to: Use Moment.js in a Calculator Component"
slug: "how-to-use-momentjs-in-a-calculator-component"
updated: 2025-09-26T10:24:16Z
published: 2025-09-26T10:24:16Z
canonical: "docs.unqork.io/how-to-use-momentjs-in-a-calculator-component"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unqork.io/llms.txt
> Use this file to discover all available pages before exploring further.

# How to: Use Moment.js in a Calculator Component

UDesignerClassic Designer

## Overview

Use **Moment.js** formulas in a [Calculator](/v1/docs/calculator-component) component to manipulate values from [Date Input](/v1/docs/date-input-component) components. Moment.js is a JavaScript 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](/v1/docs/date-input-component) components provide the inputs used by your [Calculator](/v1/docs/calculator-component) component.loa

1. In the Module Builder, drag and drop two **![Date Input Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/date_teal_icon(7).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D) Date Input** components onto your canvas.
2. In the Property ID and Label Text fields for each Date Input component, enter the following:

| Property ID | **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 ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D) **(ON)**.

> [!TIP]
> By default, dates store in ISO 8601 format with a timestamp of midnight UTC. Enabling **Store Date Only** excludes this timestamp from the stored date.

[![A static image displaying the Date Input component's Store Date Only setting.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/calcMomentJS_DateInput_thumb_0_0(1).jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/calcMomentJS%20DateInput.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D)
5. Click **Save Component** for each **![Date Input Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/date_teal_icon(7).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D) Date Input** component as you add it.

## Configure the Text Field Components

These [Text Field](/v1/docs/text-field-component) components display the results of each formula used in the [Calculator](/v1/docs/calculator-component) component.

1. Drag and drop ten **T****ext Field** components onto your canvas, placing them below the **![Date Input Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/date_teal_icon(7).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D) Date Input** components.
2. In the Property ID and Label Text 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 **T****ext Field** component as you add it.

### Configure the Columns Component

To reduce the length of the module in Express View, use a [Columns](/v1/docs/columns-component) component to sort the ten [Text Field](/v1/docs/text-field-component) components between two columns.

[![A static image displaying the Columns component containing the Text Field components.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/calcMomentJS_colCanvas_thumb_0_0(1).jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/calcMomentJS%20colCanvas.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D)

1. Drag and drop a **![Columns Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/columns_teal_component(17).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D) Columns** component onto your canvas, placing it below the **dateTwo![Date Input Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/date_teal_icon(7).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D) Date Input** component.
2. In the Property ID field, enter **colDates**.
3. Click **Save Component**.
4. Drag and Drop the ten **T****ext Field** components into the **colDates** **![Columns Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/columns_teal_component(17).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D) 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](//docs/calculator-component) component. In this Calculator component, you'll configure ten formulas in the Outputs table. 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 **![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/calculator_teal_component(4).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D) Calculator** component onto your canvas, placing it below the **dateTwo** **![Date Input Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/date_teal_icon(7).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D) Date Input** component.
2. In the Property ID and Label Text 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 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](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/date_teal_icon(7).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D) 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.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/calcMomentJS_calcOne_thumb_0_0(1).jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/calcMomentJS%20calcOne.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D)
6. In the Outputs 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 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](/v1/docs/button-component) component to trigger your [Calculator](/v1/docs/calculator-component) component.

1. Drag and drop a **![Button component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_component_icon(25).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D) Button** component onto your canvas, placing it below the **calcDate** **![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/calculator_teal_component(4).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D) Calculator** component.
2. In the Property ID field, enter **btnSubmit**.
3. In the Label Text 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.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/calcMomentJS_btnCalc_thumb_0_0(1).jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/calcMomentJS%20btnCalc.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D)
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.

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/calcMomentJS_ExpressView.webm?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D)

## Resources

- [Reference commonly used formulas in the Calculator component](/v1/docs/supportedformulas).
- [Learn about the Calculator component](/v1/docs/calculator-component).

## Overview

Use **Moment.js** formulas in a [Calculator](/v1/docs/calculator-component) component to manipulate values from [Date Input](/v1/docs/date-input-component) components. Moment.js is a JavaScript date library that lets you parse, validate, manipulate, and reformat dates. In this how-to guide, you'll learn how to use ten different Moment.js formulas in the Calculator component.

## Configure the Date Input Components

These [Date Input](//docs/date-input-component) components provide the inputs used by your [Calculator](//docs/calculator-component) component.

1. In the Module Builder, drag and drop two **![Date Input Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/date_teal_icon(7).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D) Date Input** components onto your canvas.
2. In the Property ID and Label Text fields for each Date Input component, enter the following:

| Property ID | **Label Text** |
| --- | --- |
| **dateOne** | Date One |
| **dateTwo** | Date Two |
3. In each component's configuration menu, select **D****ata**.
4. Under **Data Storage**, set **Store Date Only** in each component to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D) **(ON)**.

> [!TIP]
> By default, dates store in ISO 8601 format with a timestamp of midnight UTC. Enabling **Store Date Only** excludes this timestamp from the stored date.

[![A static image displaying the Date Input component's Data Settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Calculator_Momentjs_03_thumb_0_0(1).jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Calculator%20Momentjs%2003.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D)
5. **Save & Close** each **![Date Input Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/date_teal_icon(7).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D) Date Input** component as you add it.

## Configure the Text Field Components

These [Text Field](/v1/docs/text-field-component) components display the results of each formula used in the [Calculator](//docs/calculator-component) component.

1. Drag and drop 10 **T****ext Field** components onto your canvas, placing them below the **![Date Input Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/date_teal_icon(7).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D) Date Input** components.
2. In the Property ID and Label Text 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: |

[![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Calculator_Momentjs_02_thumb_0_0(1).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Calculator%20Momentjs%2002.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D)
3. **Save & Close** each **T****ext Field** component as you add it.

## Configure the Calculator Component

Now that you have your input and display fields, add the [Calculator](/v1/docs/calculator-component) component. In this Calculator component, you'll configure ten formulas in the Outputs table. 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 **![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/calculator_teal_component(4).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D) Calculator** component onto your canvas, placing it below the **dateTwo** **![Date Input Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/date_teal_icon(7).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D) Date Input** component.
2. In the Property ID and Label Text fields, enter `calcDate`.
3. In the component's configuration menu, select **![Actions Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/actions_icon(23).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D) Actions**.
4. In the Inputs table, enter the following:

| **Property ID** | **Alias** | **Required** |
| --- | --- | --- |
| dateOne | A | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/empty_checkbox(2).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D) |
| dateTwo | B | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/empty_checkbox(2).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D) |

> [!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.

[![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Calculator_Momentjs_04_thumb_0_0(1).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Calculator%20Momentjs%2004.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D)
5. In the Outputs table, complete the **Property ID** and **Formula** columns as follows:

| # | **Property ID** | **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 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. |

[![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Calculator_Momentjs_05_thumb_0_0(1).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Calculator%20Momentjs%2005.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D)
6. Click **Save & Close**.

## Configure the Button Component

Lastly, you'll configure a [Button](/v1/docs/button-component) component to trigger your [Calculator](/v1/docs/calculator-component) component.

1. Drag and drop a **![Button component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_component_icon(25).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D) Button** component onto your canvas, placing it below the **calcDate** **![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/calculator_teal_component(4).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D) Calculator** component.
2. In the Property ID field, enter **btnSubmit**.
3. In the Label Text field, enter `Pull Date`.
4. Set the **Action Type** to **Event**.
5. In the **On Click**, enter `calcDate`.

[![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Calculator_Momentjs_06_thumb_0_0(1).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Calculator%20Momentjs%2006.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A53%3A04Z&se=2026-11-09T04%3A53%3A04Z&sr=c&sp=r&sig=JADJOWZrfi4QEJLFVwu76bI4k%2B%2F3Oapdia%2BqbKIdiKQ%3D)
6. Click **Save & Close**.
7. **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

- [Reference commonly used formulas in the Calculator component](/v1/docs/supportedformulas).
- [Learn about the Calculator component](/v1/docs/calculator-component).

A JavaScript date library that lets you parse, validate, manipulate, and reformat dates.

JavaScript is an object-oriented computer programming language. It is most-commonly used for interactive effects in the browser.

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

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

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.

Coordinated Universal Time (UTC) is a standard, globally-accepted timezone used to regulate clocks and time around the world.

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.

Enter outputs components and actions you want the component to perform.

Enter inputs components and actions you want the component to perform..

Enter outputs components and actions you want the component to perform.