Date & Time

What is it?

The Date & Time widget allows users to input dates and times by selecting their preferred options from a pop-up calendar that appears when the widget is clicked.

How and When to use it?

To add a new Date & Time to your page, simply drag and drop the “Date & Time” widget from the left hand side of the page screen to the design area of your page.

How to configure it?

1. Drag a “Date & Time” widget into the Form

2. Click the Date & Time and then click the setting button  to open Widget Property Settings. 

3. The Widget Property Settings is shown, which contains four tabs, General, Value , Visibility and Calculation. We will demonstrate how each tab and property is used. 

Introduction of General Tab Properties

Basic

The fields in “Basic” are Name, Display Name, and Description. If you leave the display name field blank when setting up your widget, the name field will automatically become the Display Name. If you fill in both fields, the system will use the Name field as an internal reference (like in page builder), while showing the display name to your users in Production. 

Configurations

Date Time Data Type

User may change the data type of the Date & Time according to the characteristics of variables.

For example, we create a Date & Time, look through the Date Time Data Type property under Configurations in the Widget Property Settings. By default, the data type of the Input Box is “Date”.

The design time and the runtime display are shown below:

User may change to “Time”

The design time and the runtime display are shown below:

User may change to “Date & Time”

The design time and the runtime display are shown below:

When Value is From Other Page

There are only two options in the dropdown of “When Value Is From Other Page”, Normal and Looks Read-Only.

It determines whether the user can edit the value of the Date&Time if the value is from another page. By default, the value is “Normal”, which allows the user to edit the value.

Check Updated Value

It provides a validation for values with source value or default formula before storing into the database. If the user wants to save a value which is different from the source value or default formula value, then the system will display a warning message (shown below) and require the user to provide the appropriate value before saving the data. Users can click “Retrieve” to replace the edited value with the calculated value.

For example, we create a Date & Time, look through the Check Updated Value property under Configurations in the Widget Property Settings. 

We also set the default formula for “Date of Birth”, which we set it as “Now()”:

User can enable the Check Updated Value:

The design time and the runtime are shown below:

Note that here we can edit the value for “Date of Birth”. For example, we edit the date to tomorrow’s date and try to save. Since the edited value is different from the value calculated with the default formula, the warning message will be displayed:

Recalculate When Open Record

The Recalculate When Open Record provides the original source of data when user clicks the the view button in the Form Table, it triggers the calculation for the variables with defaulted formula or the transfer of source value.

For example, we create a Date & Time and rename it as “Date of Today”, and we create a Form Table to record the value of “Date of Today”.

Style

The fields of Style are Show Label, Label Style, and Value Style.

By default, Show Label is checked. If it is not checked, the left side of the widget that shows the widget name is removed and the field of the widget fills the entire widget area.

Label Style and Value Style both have the same Size option.

Label Style has two more fields: Alignment, and Width, which are in units of pixels (px) and accepts a numerical value. In Alignment, you can choose to inherit the previous alignment or choose your own alignment (left, centre, right).

Position, Size and Layout

The options for Sizing Mode are Absolute Size and Relative Size. In Position, various parameters of the widget can be adjusted. These parameters change depending on what is selected in Sizing Mode. In Absolute Size, the dimensions of the widget are the same in the Page Builder and Production. 

In Relative Size, the right and bottom sides of the widget expand to completely fill the screen/window in Production.

The options of “Display in” are “Web & Mobile” (the default setting) and “Mobile Only”. It controls whether this label would be displayed on both platforms. 

For “Date of Today”, look through the Recalculate When Open Record property under Configurations in the Widget Property Settings. 

We also set the default formula for “Date of Today”, which we set it as “Now()”:

User can enable the Recalculate When Open Record:

For example, we create another record in the Form Table, and we edit the value of “Date of Today” to be 1/1/2025, while the calculated value should be 31/3/2025.

With the Recalculate When Open Record property, when users open record in the Form Table, it will trigger the recalculation for “Date of Today”.

When users open record, the value of “Date of Today” is 31/3/2025, which follows the default calculation instead of the manual input because of the recalculation, while we can see the original record of “Date of Today” in the Form Table.

Introduction of Calculation Tab Properties

In the Calculation Tab, there are three fields, Mode, Default formula, and + New Conditional Formula.

(The red stars indicate which fields are mandatory.)

There is no conditional formula by default, the user must click on the area“+ New Conditional Formula” to add one.

There are five types of items that can be entered into a formula: Text, Date & Time, Variable, Function and Widget. You can see more in Calculation.