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 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:

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

5.

Click Save Component for each 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 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:

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

1.

Drag and drop a Columns component onto your canvas, placing it below the dateTwo 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 to match the table below:

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 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:

6.

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

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

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

• Reference commonly used formulas in the Calculator component.
• Learn about the 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 different 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 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:

3.

In each component's configuration menu, select Data.

4.

Under Data Storage, set Store Date Only in each component to  (ON).

5.

Save &  Close each 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 10  Text Field components onto your canvas, placing them below the 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:

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

In the component's configuration menu, select Actions.

4.

In the Inputs Enter inputs components and actions you want the component to perform. table, enter the following:

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:

6.

Click Save & Close.

Configure the Button Component

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

1.

Drag and drop a 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.

Set the Action Type to Event.

5.

In the On Click, enter calcDate.

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.
• Learn about the Calculator component.