Post/Comment/Recent Date Snippet

I personally dislike the way they display the dates as either 3 hours ago and a wonky timestamp on hover. So I've created two different js scripts for two different ways to display. They work on post, comment, and recent activities dates. If I missed an area please @ me and I will update the scripts to include it.

I'm currently using version 2 but have not settled on either way yet. You can view it at the community I'm building without having to join (unless you want to): https://reformedpub.com/community/

You will need to change the timezone to fit your location and the script is placed in FluentCommunity -> Settings -> Customizations - Javascript

Version one replaces the "3 hours ago" with a date and time such as "Nov. 8, 2025 @ 5:23pm" and disables the tooltip hover.

<script>
(function () {
    // Format one timestamp element
    function formatTimestampElement(el) {
        if (!el) return;

        var raw = el.getAttribute('title');
        if (!raw) return;

        // Parse raw timestamp (assumed UTC)
        var iso = raw.replace(' ', 'T') + 'Z';
        var date = new Date(iso);

        if (isNaN(date.getTime())) return;

        // Date + time options for New York (EST/EDT auto)
        var dateOptions = {
            month: 'short',
            day: 'numeric',
            year: 'numeric',
            timeZone: 'America/New_York'
        };
        var timeOptions = {
            hour: 'numeric',
            minute: '2-digit',
            hour12: true,
            timeZone: 'America/New_York'
        };

        var dateStr = date
            .toLocaleDateString('en-US', dateOptions)
            .replace(/^([A-Za-z]{3}) /, '$1. ');
        var timeStr = date
            .toLocaleTimeString('en-US', timeOptions)
            .replace(' AM', 'am')
            .replace(' PM', 'pm');

        var formatted = dateStr + ' @ ' + timeStr;

        // Apply the formatted text
        el.textContent = formatted;

        // Remove tooltip hover
        el.removeAttribute('title');
    }

    // Apply formatting to all relevant elements
    function applyToAllTimestamps() {
        var selectors = [
            'a.feed_timestamp[title]',
            '.comment_text_head_time[title]',
            '.notification_time_stamp[title]'
        ];
        var nodes = document.querySelectorAll(selectors.join(','));
        for (var i = 0; i < nodes.length; i++) {
            formatTimestampElement(nodes[i]);
        }
    }

    // Observe for dynamically added/updated nodes
    function initObserver() {
        var observer = new MutationObserver(function (mutations) {
            for (var i = 0; i < mutations.length; i++) {
                var m = mutations[i];

                if (m.type === 'childList') {
                    for (var j = 0; j < m.addedNodes.length; j++) {
                        var node = m.addedNodes[j];
                        if (node.nodeType !== 1) continue;

                        // Find matching elements in or as the added node
                        var inner = [];
                        if (
                            node.matches &&
                            (node.matches('a.feed_timestamp[title]') ||
                                node.matches('.comment_text_head_time[title]') ||
                                node.matches('.notification_time_stamp[title]'))
                        ) {
                            inner.push(node);
                        }
                        if (node.querySelectorAll) {
                            inner = inner.concat(
                                Array.from(
                                    node.querySelectorAll(
                                        'a.feed_timestamp[title], .comment_text_head_time[title], .notification_time_stamp[title]'
                                    )
                                )
                            );
                        }
                        inner.forEach(formatTimestampElement);
                    }
                } else if (
                    m.type === 'attributes' &&
                    (m.target.matches('a.feed_timestamp[title]') ||
                        m.target.matches('.comment_text_head_time[title]') ||
                        m.target.matches('.notification_time_stamp[title]'))
                ) {
                    formatTimestampElement(m.target);
                }
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true,
            attributes: true,
            attributeFilter: ['title']
        });
    }

    function init() {
        applyToAllTimestamps();
        initObserver();
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();

</script>

Version two keeps the "3 hours ago" and replaces the hovered tooltip timestamp with "Nov. 8, 2025 @ 5:23pm".

<script>
(function () {
    function formatTimestampTitle(el) {
        if (!el) return;

        var raw = el.getAttribute('title');
        if (!raw) return;

        // Expect: "2025-11-08 10:34:56"
        // Treat as UTC. Remove 'Z' if timestamps are local already.
        var iso = raw.replace(' ', 'T') + 'Z';
        var date = new Date(iso);

        if (isNaN(date.getTime())) return;

        var dateOptions = {
            month: 'short',
            day: 'numeric',
            year: 'numeric',
            timeZone: 'America/New_York'
        };
        var timeOptions = {
            hour: 'numeric',
            minute: '2-digit',
            hour12: true,
            timeZone: 'America/New_York'
        };

        // "Nov. 8, 2025 @ 10:34am"
        var dateStr = date
            .toLocaleDateString('en-US', dateOptions)
            .replace(/^([A-Za-z]{3}) /, '$1. ');
        var timeStr = date
            .toLocaleTimeString('en-US', timeOptions)
            .replace(' AM', 'am')
            .replace(' PM', 'pm');
        var formatted = dateStr + ' @ ' + timeStr;

        el.setAttribute('title', formatted);
    }

    function applyToAll() {
        // All known timestamp elements
        var selectors = [
            'a.feed_timestamp[title]',
            '.comment_text_head_time[title]',
            '.notification_time_stamp[title]'
        ];
        var nodes = document.querySelectorAll(selectors.join(','));
        for (var i = 0; i < nodes.length; i++) {
            formatTimestampTitle(nodes[i]);
        }
    }

    function initObserver() {
        var observer = new MutationObserver(function (mutations) {
            for (var i = 0; i < mutations.length; i++) {
                var m = mutations[i];

                if (m.type === 'childList') {
                    for (var j = 0; j < m.addedNodes.length; j++) {
                        var node = m.addedNodes[j];
                        if (node.nodeType !== 1) continue;

                        // Apply to matching new nodes
                        if (
                            node.matches &&
                            (node.matches('a.feed_timestamp[title]') ||
                                node.matches('.comment_text_head_time[title]') ||
                                node.matches('.notification_time_stamp[title]'))
                        ) {
                            formatTimestampTitle(node);
                        }

                        if (node.querySelectorAll) {
                            var inner = node.querySelectorAll(
                                'a.feed_timestamp[title], .comment_text_head_time[title], .notification_time_stamp[title]'
                            );
                            for (var k = 0; k < inner.length; k++) {
                                formatTimestampTitle(inner[k]);
                            }
                        }
                    }
                } else if (
                    m.type === 'attributes' &&
                    (m.target.matches('a.feed_timestamp[title]') ||
                        m.target.matches('.comment_text_head_time[title]') ||
                        m.target.matches('.notification_time_stamp[title]'))
                ) {
                    formatTimestampTitle(m.target);
                }
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true,
            attributes: true,
            attributeFilter: ['title']
        });
    }

    function init() {
        applyToAll();
        initObserver();
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();

</script>