top of page

How to create formatted dates

ABOUT

Using the Wix Blog? Learn how to change the format of the date on your posts, to match the style on your site.

SUITABLE FOR

Editor X, Classic editor

PROJECTS USED

Start Now
Start Now
Start Now
Start Now

Chapter 01: Layout

01. Add a repeater with one list item
02. Add a text element

Add paragraph text. Click “Edit Text” to customize this theme across your site. You can update and reuse text themes.

Chapter 02: Database

01. Add a collection to the site
02. Add a "date" field
03. Turn on the “include time" field
04. Add a dataset to the page
05. Connect a repeater to the dataset

Add paragraph text. Click “Edit Text” to customize this theme across your site. You can update and reuse text themes.

Chapter 03: Velo

01. Turn on Dev Mode
02. Paste "OnReady()" code
03. Paste "setDate" function
04. Add element IDs (“myRepeater” and “dateText”)

$w.onReady(function () {
    $w("#myRepeater").onItemReady(($item, itemData, index) => {
        let dateUnformated = itemData.date;
        $item('#dateText').text = setDate(dateUnformated);
    });
});

 function setDate(d) {
    const year = d.getFullYear();
    const month = ('0' + (d.getMonth() + 1)).slice(-2); // set to 2 digit
    const day = ('0' + d.getDate()).slice(-2); // set to 2 digit
    const newDate = `${day}/${month}/${year}`;
    return newDate;
}

MORE HOW TO'S

How to move elements to random positions

How to use the Blog API

How to create dynamic lightboxes

How to create hover interactions

How to create a floating image effect

How to create image hover interactions in a list

View Tutorial
bottom of page