Velo: Formatting Dates

This article explains how you can format dates on your site using Velo. 

You can display dates from your collections on your site using date pickers, which need a dataset but no code, or text elements, which require both a dataset and some simple code. 

Displaying Dates in Date Pickers

Date pickers are the easiest way to display and format dates from your collection on your site. Just add a date picker to your page and connect it to the Date field in your dataset. When visitors view the page, they will see the date value stored in your collection displayed in the date picker.

Under Input Field in the Settings panel, set the Field type to Read-only. This disables the date picker so that the calendar does not pop up if your visitors click the date.

Displaying Dates in Text Elements

This section has 3 parts:

• Instructions on how to get set up, including code you can copy and paste on to your page
• An explanation of what each line of code does
• Some additional formatting options you can apply to the date

Instructions

1. Add a text element to your page but do not connect it to the dataset. Your code will do the work instead.
2. Copy the code below and paste it as your page code.

1
$w.onReady(function () {
2
    $w("#myDataset").onReady(() => {
3
        const date = $w("#myDataset").getCurrentItem().dateField;
4
        $w("#dateText").text = date.toLocaleDateString()
5
    });
6
});

1. Make sure to make these replacements:
   • #myDataset: the ID of the dataset that is connected to your collection (hover over it to see its ID)
   • dateField: the field ID of the field that has the date you want to display
   • #dateText: the ID of the text element you added in Step 1 (hover over it to see its ID)
2. Preview your page to see how it looks.

The date format is based on your or your visitors' locale settings. For example, if you or your visitor is from the United States, this code displays a date that looks like this: 12/25/2018, while a visitor from the UK sees 25/12/2018. See the section on additional formatting options to learn how you can control exactly how the date appears for everyone.

Understanding the Code

This section explains the main lines of code. Your page code should now look like this:

1
$w.onReady(function () {
2
    $w("#myDataset").onReady(() => {
3
        const date = $w("#myDataset").getCurrentItem().dateField;
4
        $w("#dateText").text = date.toLocaleDateString()
5
    });
6
});

Line 1: Call the onReady() function. This defines the code that will run when the page is finished loading.

Line 2: Wrap the code in the dataset's onReady() function. This ensures the data has loaded before the code tries to access the current item.

Line 3: Read the data stored in the current item from the dataset. Then take the value from the dateField field and store it in a variable called date.

Line 4: Use the standard JavaScript function toLocaleDateString to return a string with the date formatted to match the visitor's locale settings. Then set the contents of your text element to value of the returned string using the text property.

Additional Formatting Options

The code above returns the date in the format defined by the visitor's locale settings on their computer. If you want more control over how the date appears, you can add arguments to the toLocaleDateString() function to control both the language in which the date appears and its format. For example, you might want the date to always appear in US English and to have the month be abbreviated, like this: Dec 25, 2018. This section shows you how to do this.

Below is the updated code you can copy and paste. You can learn more about the available JavaScript date options here.

1
$w.onReady(function () {
2
    $w("#myDataset").onReady(() => {
3
        const date = $w("#myDataset").getCurrentItem().dateField;
4
    
5
        const options = {
6
            day: "numeric",
7
            month: "short",
8
            year: "numeric"
9
        };
10
    
11
        $w("#dateText").text = today.toLocaleDateString("en-US", options);
12
    });
13
});

Lines 5-9 define an object called options. This object defines the formatting for the toLocaleDateString() function.

In this example, the date will include the full year, the short form of the month, and a numeric representation of the date: Dec 25, 2018. You can learn more about the available JavaScript date options here.

In line 11, we modify the toLocateDateString() function to include arguments for the language ("en-US") and the options defined above.