Code and article generated by AI, based on human input, editing, and testing.
You know that moment when you’re checking your event calendar, and something looks… off?
An event is listed as ending at 2 pm and starting at 5 pm. Or worse, it ends on Tuesday but doesn’t start until Thursday. Your first thought is probably “how did this even happen?” followed quickly by “how do I make sure it doesn’t happen again?”
If you’re managing events in WordPress with Meta Box, you’ve probably seen this more than once. Someone rushes through creating an event, sets the start date, maybe forgets to update the end date, or accidentally picks an end time that’s earlier than the start. It’s such a simple mistake, but it creates chaos downstream — your calendar displays get wonky, your sorting breaks, your filters return bizarre results, and your carefully crafted SEO snippets suddenly look unprofessional.
The frustrating part? Meta Box gives you beautiful date pickers and time pickers, but it doesn’t actually stop editors from saving impossible dates. You’d think “end date can’t be before start date” would be automatic, right? Nope. You have to build that logic yourself.
But here’s the thing: you want to help your editors, not punish them with a bunch of red error messages every time they make a typo.
The Philosophy: Gentle Guidance Over Strict Rules
Think about how frustrating it is when software fights you. You’re trying to schedule an event, you accidentally set the wrong date, and suddenly you’re locked out of saving until you figure out what invisible rule you broke.
Nobody wants that.
The approach I’m about to share is designed around a simple principle: the form should behave as editors expect. When they change the start date, the end date should adjust if needed. When they’re scheduling a multi-day conference, the system shouldn’t freak out about time conflicts that don’t actually exist. And if they do somehow create an impossible date range, they should get a clear, helpful message — not a cryptic error.
How Events Are Usually Set Up in Meta Box
Before we dive into the solution, let’s talk about the two common ways people structure event dates in Meta Box.
The first approach uses combined datetime fields — you have one field for “event start” that combines date and time, and another for “event end” that does the same. This is clean and simple. The rule here is straightforward: the end datetime can’t be earlier than the start datetime.
The second approach uses separate fields — for example, event_start_date, event_start_time, event_end_date, and event_end_time. This gives editors more flexibility but also creates more opportunities for confusion. After all, you’re asking them to coordinate four fields instead of two.
The script I’ll share works with both setups, because different sites have different needs.
The Smart Behavior Editors Actually Want
Here’s what should happen when someone is creating an event:
When they set a start date and the end date is blank, the system should helpfully default it to the same date. Most events happen on a single day anyway, so this is a reasonable starting point.
When they accidentally set an end date that’s earlier than the start date, the system should quietly fix it right away — not wait until they try to save and then yell at them with an error message.
When they’re scheduling a multi-day event, the system should understand that time comparisons don’t make sense. If your conference runs from Monday at 9 am to Wednesday at 5 pm, the system shouldn’t complain that “5 pm is earlier than 9 am” because they’re on different days.
When scheduling a single-day event, the end time must be equal to or later than the start time. A workshop can’t end at 2 pm if it starts at 4 pm.
This is how editors think. The form should match that mental model.
The Technical Bits (Without the Headaches)
Okay, so how do you actually make this happen? The script needs to run in the WordPress admin, but only where it matters — on the post editing screens for your event post types, and only for users who have permission to edit those posts.
It listens for changes to your date and time fields and makes gentle corrections as editors type. If someone sets an end date that’s earlier than the start date, the script immediately adjusts it to match the start date. If they’re working with a single-day event and set an invalid time, it corrects that, too.
But here’s the clever part: it only enforces time rules when the start and end dates are the same day. Multi-day events are left alone, because that’s when time comparisons become meaningless.
The “Browser Freezing” Problem (And How to Avoid It)
If you’ve ever tried to write JavaScript that updates Meta Box fields, you might have encountered the dreaded infinite loop. You update a field, which triggers a change event, which Meta Box reacts to, which triggers your script, which updates the field again, which triggers a change event, and… you see where this is going. The browser freezes, and editors panic.
The script includes a simple lock mechanism to prevent this. When it’s making a correction, it sets a flag that says, “Hey, I’m updating this field, don’t react to the change event.” This keeps everything smooth and prevents an infinite loop.
Making the Pickers Actually Update
Meta Box often uses jQuery UI date and time pickers, each with its own internal state. If you just change the value of the input field with JavaScript, the picker doesn’t update until the user clicks back into the field.
That’s annoying.
So the script uses the picker APIs directly — things like datepicker('setDate', ...) and timepicker('setTime', ...) when they’re available. This means the UI updates instantly, exactly the way editors expect.
The Last Line of Defense
Even with all these helpful real-time corrections, you still want a fail-safe. Maybe the editor is typing really fast, or maybe something weird happened with the picker, or maybe they found a creative way to bypass all your guards.
So when they click “Publish” or “Update,” the script does one final check: Is the end date earlier than the start date? If the dates are equal, is the end time earlier than the start time?
If either is true, it blocks the save and shows a clear alert message. No ambiguous errors, no silent failures — just a straightforward “Hey, your end date/time is before your start date/time. Please fix that.”
This keeps your data clean even when everything else goes sideways.
Why This Actually Matters
You might be thinking, “Okay, sure, clean data is nice, but is it really that important?”
Yes. Yes, it is.
When your event dates make sense, everything downstream works better. Your chronological sorting works. Your “upcoming events” queries return the right results. Your calendar feeds (iCal, JSON feeds, integrations with other tools) don’t break. Your filters work correctly. Your analytics show accurate event durations.
But beyond the technical stuff, there’s a trust issue. When visitors see an event that “ends before it starts,” they notice. They might not say anything, but they’ve mentally filed your site under “a bit sketchy.” And that’s not a category you want to be in.
Where to Actually Put This Code
You’ve got a few options for implementing this:
WPCodeBox is great if you want to iterate quickly and test different approaches. You can tweak the behavior, see how it feels in practice, and refine it until it works perfectly for your editors.
An MU (must-use) plugin is ideal for production sites that require governance. It loads before regular plugins, can’t be accidentally disabled from the admin, and signals “this is core site functionality, not an optional feature.”
A site-specific plugin is the best choice if you’re managing multiple sites or want version control. You can package it up, deploy it across properties, and track changes over time.
Pick whichever matches your workflow, but for long-term maintainability, an MU plugin or site-specific plugin is usually the way to go.
Making It Work for Your Setup
The script is designed to be configurable, not rigid. At the top of the PHP file, you can specify:
- Which post types it should run on (events, workshops, webinars, whatever you’re using)
- Whether you’re using combined datetime fields or separate date and time fields
- The exact field names from your Meta Box setup
- Date and time formats if you’re not using the defaults (YYYY-MM-DD and HH:MM)
This means you can use the same script across multiple event-like post types without rewriting the core logic. Set it up once, configure it for each use case, and you’re done.
The Bottom Line
Managing events shouldn’t be a constant battle against impossible dates and confused editors. This script makes your Meta Box event entry feel smart and helpful. End dates can’t drift before start dates. Time validation only happens when it makes sense. The editor UI updates immediately. Saving is blocked only when absolutely necessary.
And most importantly, your editors don’t need to learn new rules or remember special procedures. The form just works the way they expect it to work.
If you’re running an event-heavy WordPress site, this is one of those small improvements that pays dividends every single day. Your editors are happier, your data is cleaner, and your events actually make sense.
And honestly? That’s worth a few lines of JavaScript.
Video Example and Code
<?php
/**
* Meta Box date/time sync + validation
* - Multi post type
* - Datetime mode OR Separate date+time mode
* - Configurable formats (default YYYY-MM-DD, HH:MM)
* - Separate mode: time sync ONLY when start/end dates are the same
* - Works with Meta Box jQuery UI date/time pickers (hasDatepicker)
*
* WPCodeBox-safe: no top-level const.
*/
add_action('admin_enqueue_scripts', function ($hook) {
// -------------------------------------------------------------------------
// CONFIG
// -------------------------------------------------------------------------
$cfg = [
'post_types' => ['events'],
// true => 2 datetime fields (startDT/endDT)
// false => 4 fields (startDate/startTime/endDate/endTime)
'datetimeMode' => false,
// Datetime fields (datetimeMode = true)
'startDT' => 'event_start',
'endDT' => 'event_end',
// Separate fields (datetimeMode = false)
'startDate' => 'event_start_date',
'startTime' => 'event_start_time',
'endDate' => 'event_end_date',
'endTime' => 'event_end_time',
// Token formats:
// Date: YYYY, MM, DD
// Time: HH, MM, optional SS
'dateFormat' => 'YYYY-MM-DD',
'timeFormat' => 'HH:MM',
'defaultTime' => '00:00',
'dateTimeSep' => ' ',
];
// -------------------------------------------------------------------------
if ($hook !== 'post.php' && $hook !== 'post-new.php') return;
$screen = function_exists('get_current_screen') ? get_current_screen() : null;
if (!$screen || empty($screen->post_type) || !in_array($screen->post_type, $cfg['post_types'], true)) return;
$pto = get_post_type_object($screen->post_type);
$cap = ($pto && !empty($pto->cap) && !empty($pto->cap->edit_posts)) ? $pto->cap->edit_posts : 'edit_posts';
if (!current_user_can($cap)) return;
add_action('admin_print_footer_scripts', function () use ($cfg) {
?>
<script>
(function () {
"use strict";
var CFG = <?php echo wp_json_encode($cfg); ?>;
// ----------------------------
// Global lock to prevent recursion
// ----------------------------
var LOCK = 0;
function withLock(fn) {
if (LOCK) return;
LOCK = 1;
try { fn(); } finally { LOCK = 0; }
}
// ----------------------------
// Safe selectors
// ----------------------------
function cssEscape(val) {
if (window.CSS && typeof window.CSS.escape === 'function') return window.CSS.escape(val);
return String(val).replace(/["\\]/g, '\\$&');
}
function byName(name) { return document.querySelector('[name="' + cssEscape(name) + '"]'); }
function byId(id) { return document.getElementById(id) || null; }
function getField(name) { return byName(name) || byId(name); }
function hasJQ() { return typeof window.jQuery !== 'undefined'; }
function jq(el) { return hasJQ() ? window.jQuery(el) : null; }
// ----------------------------
// Setters (jQuery UI aware) - silent to avoid loops
// ----------------------------
function setPlain(el, value, silent) {
if (!el) return;
el.value = value;
if (!silent) {
withLock(function () {
el.dispatchEvent(new Event('input', { bubbles:true }));
el.dispatchEvent(new Event('change', { bubbles:true }));
if (hasJQ()) jq(el).trigger('input').trigger('change');
});
}
}
function setDatepickerValue(el, yyyyMmDd, silent) {
if (!el) return;
if (hasJQ()) {
var $el = jq(el);
if (typeof $el.datepicker === 'function') {
var parts = String(yyyyMmDd).split('-');
if (parts.length === 3) {
var d = new Date(parseInt(parts[0],10), parseInt(parts[1],10)-1, parseInt(parts[2],10), 0,0,0,0);
$el.datepicker('setDate', d);
} else {
$el.datepicker('setDate', yyyyMmDd);
}
}
}
setPlain(el, yyyyMmDd, silent);
}
function setTimepickerValue(el, hhMm, silent) {
if (!el) return;
if (hasJQ()) {
var $el = jq(el);
if (typeof $el.timepicker === 'function') {
try { $el.timepicker('setTime', hhMm); } catch (e) {}
}
}
setPlain(el, hhMm, silent);
}
function setDatepickerValueAsync(el, v, silent) {
setDatepickerValue(el, v, silent);
setTimeout(function(){ setDatepickerValue(el, v, silent); }, 0);
}
function setTimepickerValueAsync(el, v, silent) {
setTimepickerValue(el, v, silent);
setTimeout(function(){ setTimepickerValue(el, v, silent); }, 0);
}
// ----------------------------
// Parse/format helpers
// ----------------------------
function escapeRe(s) { return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); }
function pad2(n) { return String(n).padStart(2, '0'); }
function buildDateRegex(fmt) {
return new RegExp('^' + escapeRe(fmt)
.replace('YYYY', '(\\d{4})')
.replace('MM', '(\\d{1,2})')
.replace('DD', '(\\d{1,2})') + '$');
}
function buildTimeRegex(fmt) {
return new RegExp('^' + escapeRe(fmt)
.replace('HH', '(\\d{1,2})')
.replace('MM', '(\\d{1,2})')
.replace('SS', '(\\d{1,2})') + '$');
}
function parseDate(raw) {
if (!raw) return null;
var s = String(raw).trim();
var fmt = String(CFG.dateFormat || 'YYYY-MM-DD');
var m = s.match(buildDateRegex(fmt));
if (!m) return null;
var order = [
{ t:'YYYY', i: fmt.indexOf('YYYY') },
{ t:'MM', i: fmt.indexOf('MM') },
{ t:'DD', i: fmt.indexOf('DD') }
].sort(function(a,b){ return a.i-b.i; });
var out = {};
for (var i=0;i<order.length;i++) out[order[i].t] = parseInt(m[i+1],10);
var y = out.YYYY, mo = (out.MM||1)-1, d = out.DD||1;
if (!isFinite(y) || mo<0 || mo>11 || d<1 || d>31) return null;
return { y:y, m:mo, d:d };
}
function parseTime(raw) {
var fmt = String(CFG.timeFormat || 'HH:MM');
var fallback = String(CFG.defaultTime || '00:00');
if (!raw) raw = fallback;
var s = String(raw).trim();
var m = s.match(buildTimeRegex(fmt));
if (!m) {
var mm = s.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/);
if (!mm) return null;
return {
hh: Math.min(23, Math.max(0, parseInt(mm[1],10))),
mm: Math.min(59, Math.max(0, parseInt(mm[2],10))),
ss: mm[3] ? Math.min(59, Math.max(0, parseInt(mm[3],10))) : 0
};
}
var order = [
{ t:'HH', i: fmt.indexOf('HH') },
{ t:'MM', i: fmt.indexOf('MM') },
{ t:'SS', i: fmt.indexOf('SS') }
].filter(function(x){ return x.i !== -1; })
.sort(function(a,b){ return a.i-b.i; });
var out = {};
for (var i=0;i<order.length;i++) out[order[i].t] = parseInt(m[i+1],10);
var hh = out.HH, mi = out.MM, ss = out.SS || 0;
if (!isFinite(hh) || !isFinite(mi) || !isFinite(ss)) return null;
return {
hh: Math.min(23, Math.max(0, hh)),
mm: Math.min(59, Math.max(0, mi)),
ss: Math.min(59, Math.max(0, ss))
};
}
function formatDate(dt) {
var fmt = String(CFG.dateFormat || 'YYYY-MM-DD');
return fmt
.replace('YYYY', String(dt.getFullYear()))
.replace('MM', pad2(dt.getMonth()+1))
.replace('DD', pad2(dt.getDate()));
}
function formatTime(dt) {
var fmt = String(CFG.timeFormat || 'HH:MM');
var out = fmt
.replace('HH', pad2(dt.getHours()))
.replace('MM', pad2(dt.getMinutes()));
if (out.indexOf('SS') !== -1) out = out.replace('SS', pad2(dt.getSeconds()));
return out;
}
function parseDateTime(raw) {
if (!raw) return null;
var s = String(raw).trim();
if (!s) return null;
var sep = String(CFG.dateTimeSep || ' ');
var parts = (sep === 'T') ? s.split('T') : s.replace(/\s+/, ' ').split(' ');
if (parts.length === 1 && s.indexOf('T') !== -1) parts = s.split('T');
var d = parseDate(parts[0]);
if (!d) return null;
var t = parseTime(parts.slice(1).join(' '));
if (!t) return null;
var dt = new Date(d.y, d.m, d.d, t.hh, t.mm, t.ss, 0);
return isNaN(dt.getTime()) ? null : dt;
}
function formatDateTime(dt) {
return formatDate(dt) + String(CFG.dateTimeSep || ' ') + formatTime(dt);
}
// ----------------------------
// Submit guard
// ----------------------------
function addSubmitGuard(isValidFn, onInvalidFn) {
var form = document.querySelector('form#post');
if (!form) return;
if (!form._fwGuards) {
form._fwGuards = [];
form.addEventListener('submit', function (e) {
for (var i=0;i<form._fwGuards.length;i++) {
var g = form._fwGuards[i];
if (g && typeof g.isValid === 'function' && !g.isValid()) {
e.preventDefault();
if (typeof g.onInvalid === 'function') g.onInvalid();
return;
}
}
});
}
form._fwGuards.push({ isValid: isValidFn, onInvalid: onInvalidFn });
}
// ----------------------------
// Wiring
// ----------------------------
function wireDatetime(startEl, endEl) {
if (!startEl || !endEl) return;
if (startEl._fwWired || endEl._fwWired) return;
startEl._fwWired = endEl._fwWired = true;
function readStart(){ return parseDateTime(startEl.value); }
function readEnd(){ return parseDateTime(endEl.value); }
function sync() {
if (LOCK) return;
var s = readStart();
if (!s) return;
var e = readEnd();
if (!e || e < s) {
withLock(function(){
// silent write: don't fire events, just enforce the constraint
setPlain(endEl, formatDateTime(s), true);
});
}
}
sync();
['input','change','blur','keyup'].forEach(function(evt){
startEl.addEventListener(evt, sync);
});
['change','blur'].forEach(function(evt){
endEl.addEventListener(evt, sync);
});
addSubmitGuard(function(){
var s = readStart(), e = readEnd();
return !(s && e && e < s);
}, function(){
alert('End date/time cannot be before the start date/time.');
endEl.focus();
});
}
function wireSeparate(sd, st, ed, et) {
if (!sd || !ed) return;
if (sd._fwWired || ed._fwWired) return;
sd._fwWired = ed._fwWired = true;
function readStartDateObj() {
var d = parseDate(sd.value);
if (!d) return null;
return new Date(d.y, d.m, d.d, 0,0,0,0);
}
function readEndDateObj() {
var d = parseDate(ed.value);
if (!d) return null;
return new Date(d.y, d.m, d.d, 0,0,0,0);
}
function readStartDT() {
var d = parseDate(sd.value);
if (!d) return null;
var t = parseTime(st ? st.value : '');
if (!t) return null;
var dt = new Date(d.y, d.m, d.d, t.hh, t.mm, t.ss, 0);
return isNaN(dt.getTime()) ? null : dt;
}
function readEndDT() {
var d = parseDate(ed.value);
if (!d) return null;
var t = parseTime(et ? et.value : '');
if (!t) return null;
var dt = new Date(d.y, d.m, d.d, t.hh, t.mm, t.ss, 0);
return isNaN(dt.getTime()) ? null : dt;
}
function datesEqual(d1, d2) {
return d1 && d2 &&
d1.getFullYear() === d2.getFullYear() &&
d1.getMonth() === d2.getMonth() &&
d1.getDate() === d2.getDate();
}
function sync() {
if (LOCK) return;
var sDate = readStartDateObj();
if (!sDate) return;
var eDate = readEndDateObj();
// 1) Enforce end date >= start date
if (!eDate || eDate < sDate) {
withLock(function(){
setDatepickerValueAsync(ed, formatDate(sDate), true); // silent
// NOTE: do NOT touch end time here
});
return; // after correcting end date, we can stop
}
// 2) Only enforce time when dates are the same
if (!datesEqual(sDate, eDate)) {
return;
}
// If dates are the same, enforce end time >= start time
var sDT = readStartDT();
if (!sDT) return;
var eDT = readEndDT();
if (!eDT || eDT < sDT) {
withLock(function(){
if (et) setTimepickerValueAsync(et, formatTime(sDT), true); // silent
});
}
}
// Initial
sync();
// Listen on start fields (date/time)
['input','change','blur','keyup'].forEach(function(evt){
sd.addEventListener(evt, sync);
if (st) st.addEventListener(evt, sync);
});
// Listen on end fields (date/time)
['change','blur','keyup'].forEach(function(evt){
ed.addEventListener(evt, sync);
if (et) et.addEventListener(evt, sync);
});
// Extra: jQuery UI pickers often trigger via jQuery change
if (hasJQ()) {
jq(sd).on('change', sync);
if (st) jq(st).on('change', sync);
jq(ed).on('change', sync);
if (et) jq(et).on('change', sync);
}
// Hard guard on submit:
// - end date must be >= start date
// - if same date: end time must be >= start time
addSubmitGuard(function(){
var sDate2 = readStartDateObj();
var eDate2 = readEndDateObj();
if (!sDate2 || !eDate2) return true;
if (eDate2 < sDate2) return false;
if (datesEqual(sDate2, eDate2)) {
var sDT2 = readStartDT();
var eDT2 = readEndDT();
if (sDT2 && eDT2 && eDT2 < sDT2) return false;
}
return true;
}, function(){
alert('End date/time cannot be before the start date/time.');
(ed || et || sd).focus();
});
}
function attach() {
if (CFG.datetimeMode) {
var startDT = getField(CFG.startDT);
var endDT = getField(CFG.endDT);
if (startDT && endDT) wireDatetime(startDT, endDT);
return;
}
var sd = getField(CFG.startDate);
var st = getField(CFG.startTime);
var ed = getField(CFG.endDate);
var et = getField(CFG.endTime);
if (sd && ed) wireSeparate(sd, st, ed, et);
}
// Run now + retry + observe
attach();
var tries = 0, maxTries = 40;
var iv = setInterval(function(){
tries++;
attach();
if (tries >= maxTries) clearInterval(iv);
}, 100);
var obs = new MutationObserver(function(){ attach(); });
obs.observe(document.body, { childList:true, subtree:true });
})();
</script>
<?php
}, 99);
});
