Currently an event date in the Upcoming Events gadget is dumped as a date string of 1 Oct 2021 8:30 AM (UTC-00:00)

This isn't user friendly.

<$it.EventDate$> doesn't offer any filtering options, and sadly something like <$it.EventDay$>/<$it.EventMonth$>/<$it.EventYear$> does not exist.

I've tried parsing the dates with jQuery, whilst this works fine in codepen tests it does not work in production on Wild apricot:

jQuery("div.date").each(function () {
var data = jQuery(this).html();
var arr = data.split(' ');
jQuery(this).html("<span class='day'>"+arr[0] + "</span><span class='month'>" + arr[1]+"</span><span class='year'>"+arr[2] +"</span>");
});

Can I please get some advice on how to parse these dates so I can style the information in a more user-friendly manner, or is there something I'm missing here?

Thanks!