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 2 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.

See How to Manage Blog Settings for other blog post, header, and section configuration options.