Date Time

The Date Time field gives a custom widget a proper calendar picker instead of a free-text date box. Editors click the field in Elementor, a Flatpickr calendar opens, and they pick a date (and optionally a time) without ever worrying about typing the format your widget expects. Inside the Master Addons Widget Builder, that consistency is the whole point: the value always arrives in a predictable format your template and script can rely on.

The field connects through a token like every simple value field. Print {{ event_date }} in the HTML panel to display the date, or hand it to the JS panel where a countdown, an opening-hours check, or a scheduling script can parse it.

What the Date Time field does #

• Renders a click-to-open calendar picker (Flatpickr) in the widget’s Elementor panel.
• Optionally includes a time selector alongside the calendar.
• Stores the pick as a formatted string, normalized to Y-m-d H:i with time enabled or Y-m-d without it.
• Prints that string anywhere in the HTML, CSS, or JS panel through {{ your_field_name }}.
• Feeds JavaScript directly, the usual route for countdown and scheduling widgets.

If custom widgets are new territory, the Widget Builder overview is the better starting point; this page assumes you know your way around the editor.

Before you start #

• WordPress with Elementor installed and active.
• Master Addons for Elementor installed and active. New to the plugin? See the installation guide.
• A custom widget open in the Widget Builder editor. Our example is an event countdown widget with a Date Time field named event_date that the widget’s script counts down to.

How to add a Date Time field #

Drag the Date Time field from the fields panel into a section under the Content tab. Its options open on the left once it lands.

Date Time field options explained #

• Label: the text shown next to the picker in Elementor, for example “Event Date”.
• Name: the unique identifier your templates refer to. Letters, numbers, and underscores only, for example event_date.
• Default: the starting date string the widget ships with.
• Enable Time: adds an hour and minute selector to the calendar. With it on, values come out as Y-m-d H:i (like 2026-12-31 18:00); with it off, as a plain Y-m-d date.
• Minute Increment: the step the minute selector moves in, so editors can be limited to 5, 15, or 30 minute slots.
• Description, Show Label, Separator: the standard display options, plus Conditions for showing the field only when another control has a certain value.

Under the hood the picker accepts a picker_options object with further Flatpickr settings, including noCalendar for a time-only picker, dateFormat, time_24hr, and minDate/maxDate bounds. The builder UI keeps the common ones, Enable Time and Minute Increment, front and center, and the runtime normalizes stored values to the two formats above either way.

Connect the Date Time field with its token #

The Date Time field is a token field. Displaying the date is one token in the HTML panel:

<p class="event-when">Doors open {{ event_date }}</p>

The more common wiring is the JS panel. Because the value is a stable Y-m-d H:i string, JavaScript can parse it and drive a countdown:

// JS panel
var deadline = new Date("{{ event_date }}".replace(" ", "T"));

var timer = setInterval(function () {
  var diff = deadline - new Date();
  if (diff <= 0) { clearInterval(timer); return; }
  var days  = Math.floor(diff / 86400000);
  var hours = Math.floor((diff % 86400000) / 3600000);
  document.querySelector(".event-countdown").textContent =
    days + "d " + hours + "h";
}, 1000);

One thing worth knowing before an international launch: the parsed date has no timezone attached, so new Date() interprets it in each visitor’s local time. A countdown to “18:00” ends at 18:00 in Berlin and again at 18:00 in New York. For a single global deadline, append an explicit offset like +00:00 to the string before parsing.

Watch out: the token prints a plain string, so quote it in JavaScript. var deadline = "{{ event_date }}"; works; without the quotes the rendered value is a syntax error. And since the format is fixed by the Enable Time setting, decide up front whether your script expects 2026-12-31 or 2026-12-31 18:00, then keep the toggle consistent with it.

Use the Date Time control in Elementor #

Add your custom widget to a page in Elementor, or reload the editor if the page was already open. The field shows as a text-style input under your label; clicking it opens the calendar popover.

Pick a day, and with Enable Time on, set the hour and minutes below the calendar. The input fills with the formatted value and the preview updates. Editors never type the date by hand, so the format your script parses is always the format that arrives.

Common use cases #

• Countdown widgets for launches, sales, and events, with the JS panel doing the math.
• Event cards that print a formatted date next to a venue and title.
• Limited-offer banners that a script hides once the deadline passes.
• Booking and schedule displays where opening or closing times feed the markup.
• “Published on” style metadata for custom content widgets.

Tips for working with the Date Time field #

• Match Enable Time to the job. A countdown needs the time component; a “published on” line does not. The stored format follows the toggle.
• Quote the token in JS. The value is a string, and unquoted dates break the script the moment it renders.
• Normalize before parsing. Replacing the space with T, as in the countdown example, keeps new Date() parsing consistent across browsers.
• Set a Default in the future for countdown widgets, so a fresh drop counts down instead of showing zeros.
• Use Minute Increment to reduce noise. Fifteen-minute steps are easier to pick and read than arbitrary minutes.
• Handle the past. Decide in the script what happens when the deadline has passed: hide the widget, show a message, or stop at zero.

Frequently Asked Questions #

Wrapping up #

The Widget Builder Date Time field takes date entry out of editors’ hands and puts a predictable string into yours: one picker in the panel, one token in the template, and formats that scripts can parse without defensive code. Pair it with the Switcher field to toggle expired-state behavior, or the Number field for tunable refresh intervals. Explore the rest of the Master Addons widgets and extensions, and see the pricing page for what each plan includes.