Customizing a Date & Time Element
The Date & Time feature allows you to add time and date based calculations into your calculator. With this element, you will be able to offer your customers bookings, allow them to calculate deadlines or workout results.
Global Settings
Global settings apply to all Date & Time elements within the calculator.
- The Current Time displays the current time, along with any modifications like timezone, date format, and 12/24-hour clock preferences.
- The Select Timezone allows you to choose the timezone to be used for the element.
- The Select Date Format offers four formats to choose from: Universal, European, British, and US.
- The Select Locale sets the language that the calendar will appear in.
- The Use AM/PM Instead of 24 Hours toggle switch between a 12-hour or 24-hour clock format.
- The Week starts on Sunday allows to choose Sunday as a first day of the week compared to default Monday.
Element Settings
- The Current Time displays the current time, along with any modifications like timezone, date format, and 12/24-hour clock preferences.
- The Element Label input field lets you name your element. The toggle controls whether the label is visible or hidden.
- The Element Tooltip is a text field that lets you give more context to each element or explain what information you require to input. Once enabled, it will appear as a small info icon next to the element title.
- The Input Fields option allows you to choose one of three ways to show date or time: only date, both date and time and only time.
- The Value Metric chooses the unit for calculations, such as minutes, hours, or days, to be used in formulas.
- The Show Element toggles the visibility of the element on or off.
- The Disable Selection toggle controls whether the element is interactive (can accept input) or locked for display purposes
- The Default Value allows to set the initial value for the element. You can choose the current time (with the option to modify it dynamically) or specify an exact date and time.
- The Min and Max Value settings define the range of acceptable values. If the user inputs a value outside this range, it will automatically adjust to the nearest allowable value.
How the element logic works?
The Date & Time element allows you to perform calculations using date and time values.
For example, you can calculate the number of days between two dates. However, the output will only be a numeric value (e.g., 3 days), not a specific date or time (e.g., October 5, 2004, or 13:40).
Examples:
- If you select the current day, the result will be 0 because there’s no difference in time.
- If you select a day 3 days in the future, the result will be 3.
- Selecting a date 3 days in the past will yield a result of -3.
- Changing the value metric to months will return 0 unless the selected day is at least one month away from the current day.
The same logic applies when calculating time differences.
The displayed value will depend on how you choose to represent the time difference.
Examples:
- If you choose to display hours, and the current time is 12:40, selecting 13:00 in the other element will show 0, as a full hour hasn’t passed.
- However, if you display the result in minutes, the output will be 20, since 20 minutes have passed from the current time.
Tip: Ensure that the Value Metric is the same for both elements when calculating a time or date difference.
How to use the Date & Time element in calculations?
The element can be used in various different ways depending on your use case.
Booking Forms
This element is ideal for booking forms, where users can select start and end dates for their bookings. You can then calculate the duration of the stay and allow customers to submit their booking details.
You can also limit date selections to a specific range, which is especially helpful for managing availability.
☞Use this calculator template as basis for your custom hotel booking form
Fitness Calculations
In fitness calculators, the Date & Time element can be used to track workout duration or suggest rest periods between sessions (e.g., a 48-hour recovery).
☞Use this calculator template as basis for your custom fitness calculator
Sleep Hours Calculations
Start and end dates in the Date & Time element can be used to calculate the average sleep duration over a period, helping users understand their sleep patterns.
☞Use this calculator template as basis for your custom sleep calculator
Pregnancy Calculators
Date & Time element can be useful in pregnancy calculations by estimating how many weeks pregnant a person is based on their due date or the date of their last menstrual period (LMP).
☞Use this calculator template as basis for your custom pregnancy calculator
Age Calculations
The element can help calculate the time difference between two dates. For instance, you could calculate the hours between 17:00 on the 1st and 08:00 on the 2nd, or calculate the age of an invoice by comparing today’s date with the invoice date.
The same logic can also applies to human age calculations.
☞Use this calculator template as basis for your custom age calculator
NOTE: It’s important to note that the calculator can’t return specific dates (e.g., "what date was exactly 5 years ago"). Instead, it will only provide a numeric value (e.g., how many months or days have passed since that time). This functionality is currently unavailable.
Tips
- Date & Time element should not be used as a value element for conditional visibility rules.