Hackernoon logoHow To Format Dates Correctly by@velo

How To Format Dates Correctly

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.
image
Velo by Wix Hacker Noon profile picture

Velo by Wix

Velo is a full-stack development platform that empowers you to rapidly build, manage and deploy professional web apps.

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.

image

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

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.

image

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.

image

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 

options
 defined above.

Previously published at https://support.wix.com/en/article/velo-formatting-dates

Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.