How to Calculate Dates Dynamically
In this tutorial, we’ll show how to create a JetFormBuilder form that dynamically calculates a final date based on a selected start date, duration, and optional extra service. This setup is useful for rental forms, service bookings, or any scenario where the end date depends on user inputs.
Table of Contents:
Form Structure:
- “Start Date” Date Field — lets the user select the beginning of the service or booking period;
- “Duration” Number Field — to enter the number of days the service or booking will last;
- “Extra Service” Select Field — allows users to choose optional add-on services that extend the total duration;
- “Final Date Calculation” Calculated Field — calculates the final timestamp by combining the start date, duration, and extra service time;
- “Final Date” Date Field — displays the calculated end date in a readable format.
Create a New Form
Proceed to the WordPress Dashboard > JetFormBuilder > Add New Form tab.
Name your form, e.g., “Date Calculation,” and press the “Start from scratch” button from the Welcome Block. It inserts the Hidden Field, Text Field, and Action Button.
We delete the Text Field and place the Date Field block with the “Start Date” FIELD LABEL.
Next, we press the “+ Add Dynamic Value” button to open a pop-up.
Then, we click the “wrench” button near the VALUE TO SET textarea and select “%CT::CurrentDate%” from the Extra Macros list and “toDate” from the Filters list.
In this way, we set such a value:
‘%CT::CurrentDate|toDate%’
The value should be wrapped in single quotes.
Next, we set the “Always” APPLY TYPE.
In the repeater item, we select the current block from the FIELD drop-down (“Start Date”) and the “Empty” OPERATOR.
This ensures the field defaults to today if left empty.
To save the dynamic condition settings, we press the “Update” button.
The second block we set is the Number Field with the “Duration” FIELD LABEL and “Enter number of days” FIELD DESCRIPTION.
The third block is the Select Field with the “Extra Service” FIELD LABEL.
The options can be adjusted by clicking the “Manage items” button. In the pop-up, variants can be added by pushing the “+ Add new Option” button. We fill in the repeater item fields, especially the CALCULATE, since its value will be used in the calculations further. The value equals the number of extra days needed for the service.
The options can be saved with the “Update” button.
The fourth block is the Calculated Field with the “Final Date Calculation (Hidden)” FIELD LABEL.
Here, we type such a formula:
%start_date|T% + %duration|toDayInMs% + %extra_service|toDayInMs%
where:
- %start_date|T% — is the name of the Date Field with the ‘|T’ (timestamp) filter. It converts the selected date into a Unix timestamp in milliseconds;
- %duration|toDayInMs% — is the name of the Number Field with the ‘toDayInMs’ filter, which converts the entered value (in days) into milliseconds by multiplying it by the number of milliseconds in a single day;
- %extra_service|toDayInMs% — works the same way for the Select Field.
Then, we proceed to the Block > Field tab and select the “as Date” VALUE TYPE.
We also scroll down the settings and activate the Hidden toggle to make this block invisible on the front end.
The fifth block is the Date Field with the “Final Date” FIELD LABEL.
We press the “+ Add Dynamic Value” button to open the pop-up, click the “wrench” button near the VALUE TO SET textarea, select the name of the “Final Date Calculation (Hidden)” Calculated Field from the Extra Macros list, and wrap it in single quotes:
‘%final_date_calculation_hidden%’
Next, we set the “Always” APPLY TYPE. The repeater item can be deleted.
It displays the final date in a user-friendly format.
To save the pop-up settings, we press the “Update” button.
All form fields are adjusted, so the Post Submit Actions can be set in the JetForm settings tab on the right side. We keep the “Save Form Record” action to store the input.
Finally, the “Save” button should be pressed to save the changes.
Check the Result
Test the form on the front end to ensure all values calculate correctly.
Open any page in Elementor/Gutenberg/Bricks editor and place the JetForm widget/block/element.
Check the page with the form on the front end and fill in the form fields.
We set “14/05/2025” start date, “3” Duration, and “Maintenance & Support” extra service with the “3” value (which means three extra days). Based on the “start_date + duration + extra” calculation, we obtain the “20/05/2025” final date.
That’s all. With JetFormBuilder macros and dynamic values, you can create forms that handle real-time date calculations on your WordPress website. It improves user experience and ensures accuracy in time-sensitive bookings.
