Hostinger AI Builder: How to change the blog post date format in manual mode

Customize the blog post date format across your Hostinger AI Builder manual mode website using custom code.

Updated 4 weeks ago

Change the date format for all blog posts on your Hostinger AI Builder manual mode website using custom code.

Copy the code

<script>
    function formatDate(date) {
        let d = new Date(date.innerText),
            month = '' + (d.getMonth() + 1),
            day = '' + d.getDate(),
            year = d.getFullYear();
        if (month.length < 2)
            month = '0' + month;
        if (day.length < 2)
            day = '0' + day;
        return [year, month, day + " "].join('/');
    }
    setInterval(() => {
        if (document.contains(document.querySelector('.block-blog-list')) && document.querySelector('.block-blog-list-item:last-of-type .blog-list-item-meta__subtitle span:first-of-type').innerHTML.at(-1) !== ' ') {
            let randomPosts = document.querySelectorAll('.block-blog-list-item');
            randomPosts.forEach(post => {
                post.querySelector('.blog-list-item-meta__subtitle span:first-of-type').innerText = formatDate(post.querySelector('.blog-list-item-meta__subtitle span:first-of-type'));
            })
        }
        if (document.contains(document.querySelector('.block-blog-header')) && document.querySelector('.blog-list-item-meta__subtitle span:first-of-type').innerHTML.at(-1) !== ' ') {
            document.querySelector('.blog-list-item-meta__subtitle span:first-of-type').innerText = formatDate(document.querySelector('.blog-list-item-meta__subtitle span:first-of-type'));
        }
    }, 500);
</script>

Customize the code

Depending on your preferred date format, change the arrangement of the values here:

return [year, month, day + " "].join('/');

The example above would return the date in the following format: yyyy/mm/dd.

Paste the code

Within the builder, go to your website’s Ellipsis more Integrations, and paste the code in the Custom code field. Then, save the changes and update your website.

The change will be visible in the preview mode and online; it’s not visible in the editor.