979 reads

How To Format Dates Correctly

by Velo by WixMay 24th, 2021

Too Long; Didn't Read

Velo is a full-stack development platform that empowers you to rapidly build, manage and deploy professional web apps. 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. The date format is based on your or your visitors' locale settings. For example, this code displays a date that looks like this: 12/25/2018, while a visitor from the UK sees 25/12/2018.

featured image - How To Format Dates Correctly

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.

Before you begin:
Make sure you have a collection that has a field of type "Date and Time".

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 and Time" field in your dataset. When visitors view the page, they will see the date part of the value stored in the “Date and Time” field in your collection.

Make sure to set the date picker to be “Read-only” in its Settings panel. This disables the date picker so that the calendar does not pop up if your visitors click the date.

Design customization tips

You can hide the calendar icon by choosing a color that matches the background of your element in the Date Picker Design panel.
Because the Date Picker is set to be "read only," when customizing its look and feel make sure to choose “Disabled” from the dropdown in the Input Field tab of the Date Picker Design panel.

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

Add a text element to your page but do not connect it to the dataset. Your code will do the work instead.
Open the Code panel of your page (you can just drag it up from the bottom).
Copy the code below and paste it in the Page tab of the Code panel. Make sure to paste it under the line that says “//TODO: write your page related code here…” (You can delete that line if you want.)

// Get the date from the date field of the current item
const date = $w("#myDataset").getCurrentItem().dateField;
// Set the text element to display the date using the user's settings
$w("#dateText").text = date.toLocaleDateString()

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 key 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)
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 the code. The code in your Code Panel should look like the following image. You can click <-> button on the Code Panel Toolbar to line everything up.

Line 3 calls the

onReady()

function. This defines the code that will run when the page is finished loading.

Line 5 reads the data stored in the current item from the dataset. It then takes the value from the

dateField

field and stores it in a variable called

date

Line 7 uses the standard JavaScript function

toLocaleDateStrin

to return a string with the date formatted to match the visitor's locale settings.

The

text

property then sets the contents of your text element to be the returned string.

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.

const options = {
    day: "numeric",
    month: "short",
    year: "numeric"
};
    // Sets the property of the text element to be a string representing today's date in US English
$w("#dateText").text = today.toLocaleDateString("en-US", options);

Your code should look like the image below.

Lines 7-11 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.

Line 13 has been modified to include arguments for the language ("en-US") and the