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. Make sure you have a that has a field of type "Date and Time". Before you begin: collection 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 connect it to the dataset. Your code will do the work instead. do not Open the of your page (you can just drag it up from the bottom). Code panel 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.) date = $w( ).getCurrentItem().dateField; $w( ).text = date.toLocaleDateString() // Get the date from the date field of the current item const "#myDataset" // Set the text element to display the date using the user's settings "#dateText" Make sure to make these replacements: ◦ : the ID of the dataset that is connected to your collection (hover over it to see its ID) ◦ : the of the field that has the date you want to display ◦ : the ID of the text element you added in Step 1 (hover over it to see its ID) #myDataset dateField field key #dateText 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 to learn how you can control exactly how the date appears for everyone. additional formatting options 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 function. This defines the code that will run when the page is finished loading. onReady() Line 5 reads the data stored in the current item from the dataset. It then takes the value from the field and stores it in a variable called . dateField date Line 7 uses the standard JavaScript function to return a string with the date formatted to match the visitor's locale settings. toLocaleDateStrin The property then sets the contents of your text element to be the returned string. text 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 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: . This section shows you how to do this. toLocaleDateString() Dec 25, 2018 Below is the updated code you can copy and paste. You can learn more about the available JavaScript date options . here options = { : , : , : }; $w( ).text = today.toLocaleDateString( , options); const day "numeric" month "short" year "numeric" // Sets the property of the text element to be a string representing today's date in US English "#dateText" "en-US" Your code should look like the image below. Lines 7-11 define an object called . This object defines the formatting for the function options toLocaleDateString() In this example, the date will include the full year, the short form of the month, and a numeric representation of the date: . You can learn more about the available JavaScript date options . Dec 25, 2018 here Line 13 has been modified to include arguments for the language ("en-US") and the defined above. options Previously published at https://support.wix.com/en/article/velo-formatting-dates

Develop Smarter, Deliver Faster

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

How To Format Dates Correctly

Too Long; Didn't Read

Velo by Wix

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How To Format Dates Correctly

Too Long; Didn't Read

Velo by Wix

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES