The Date Time option adds a specialized control for selecting both a calendar date and a specific time. It provides a user-friendly interface for inputting precise timestamp values.
Why would someone use it in a custom widget? #
Use this control when your widget functionality depends on a specific date and/or time. This is essential for creating event countdown timers, showcasing publication dates, displaying limited-time offers, or building any feature that revolves around scheduling or time-sensitive information.
Where This Option Appears #
- In Widget Builder: You add this control in the Content tab.
- In the Elementor Editor: Once saved, it appears as a combined date and time picker field. Users can click to open a visual calendar to choose a date and a dropdown or spinner to select a specific time.
Available Settings #
Here are the configurable settings for the Date Time control:
Basic Settings #
- Label: The name of the control (e.g., “Event Date”, “Offer Expiry”).
- Name: The unique machine-readable ID (like
event_date) for the dynamic shortcode. - Description: Optional text to explain the field’s purpose.
- Enable Time: A crucial toggle. When enabled, the control will include time selection (hours and minutes). When disabled, it becomes a date-only picker.
- Minute Increment: Defines the step for the minute selector (e.g.,
1,5,15,30). A setting of15means users can only select times like 8:00, 8:15, 8:30, etc. - Default Value: The pre-selected date (and time, if enabled). The format in the screenshot (
2026-02-16 08:03) suggests a standardYYYY-MM-DD HH:MMformat.
Advanced Settings #
- Separator, Conditions, Control Classes, Selector: These standard advanced options are visible in the second screenshot and function as with other controls.
Generated Shortcode #
When you add a Date Time control with the Name start_time, Widget Builder generates the shortcode: {{start_time}}.
- What it represents: This shortcode outputs the selected date and time as a string in a standardized format (e.g.,
2026-02-16 08:03). - Where to use it: This value is typically used in your HTML Panel for display or as a data attribute, and most importantly, in your JS Panel for calculations and logic.
- HTML Panel:
<span class="event-date">Starts: {{start_time}}</span> - JS Panel: Essential for countdowns or time-based logic, where you would parse this string into a JavaScript
Dateobject.
- HTML Panel:
How to Use It: A Practical Example #
Let’s create a “Countdown Timer” widget for a promotional offer.
- In Widget Builder’s Content tab, add a Date Time control.
- Set the Label to
Offer Ends On. - Ensure Enable Time is set to YES.
- Set Minute Increment to
1for precise timing. - Set a future Default Value like
2026-12-31 23:59. - In your HTML panel, you might have a container:
<div class="countdown-timer" data-endtime="{{offer_ends_on}}"></div>. - The real magic happens in your JS Panel, where you would write JavaScript to:
- Read the
data-endtimevalue ({{offer_ends_on}}). - Convert it to a JavaScript
Dateobject. - Calculate the difference between now and that date.
- Dynamically update the displayed days, hours, minutes, and seconds.
- Read the
Common Use Cases #
- Countdown Timers: The primary use case for events, launches, or sales.
- Event Listings: Display the date and time of upcoming events.
- Post/Publish Date Display: Show a custom timestamp for articles or news items.
- Limited-Time Visibility: Use the value in JavaScript to show or hide widget content before or after a specific moment.
Helpful Tips #
- Decide on Time Precision: Use the Minute Increment to match the needed precision. For a conference start time,
1or5is good. For a daily sale,30or60might suffice. - JavaScript is Your Friend: The true power of this control is unlocked with front-end JavaScript. Plan to use the output value in your JS Panel for any dynamic time-based features.
- Format for Display: The raw format (
YYYY-MM-DD HH:MM) is ideal for scripts but may not be ideal for front-end display. You may need to use JavaScript or PHP in your widget to reformat it into a more readable style (e.g., “Dec 31, 2026 at 11:59 PM”). - Consider Timezones: Be aware that the selected time is typically in the site’s local timezone. For global events, you may need additional controls or logic to handle timezone conversion.
The Date Time control adds a powerful dimension of time-based interactivity to your widgets, moving them from static displays to dynamic, scheduled components.
Frequently Asked Questions #
What is the Date Time control in the Master Addons Widget Builder?
The Date Time control adds a combined date and time picker to a custom widget, letting editors choose a calendar date and a specific time. Added in the Content tab, it appears in Elementor as a field that opens a visual calendar plus a time selector, ideal for events, offers, and scheduling.
Can I use it as a date-only picker without a time?
Yes. The Enable Time toggle controls this. Turn it on to include hours and minutes, or turn it off to make the control a date-only picker. Use date-only when the time of day does not matter, such as a publication date.
How do I control the minute steps in the time picker?
Use the Minute Increment setting, which accepts values like 1, 5, 15, or 30. For example, an increment of 15 limits choices to times like 8:00, 8:15, and 8:30. Use a small increment such as 1 for precise event times and a larger one for looser scheduling.
What format does the {{start_time}} shortcode output?
For a control named start_time the {{start_time}} token outputs a standardized string such as 2026-02-16 08:03, in YYYY-MM-DD HH:MM format. You can display it directly in HTML or, more commonly, parse it into a JavaScript Date object in the JS panel for countdowns and time logic.
How do I build a countdown timer with this control?
Put the value into a data attribute, like data-endtime=”{{offer_ends_on}}”, then in the JS panel read that attribute, convert it to a Date object, calculate the difference from now, and update the displayed days, hours, minutes, and seconds. Remember the time uses the site’s local timezone.
