How to change the date format in Wix

Quite often my customers ask me to change the date format on their Wix site. Some requirements are simple. They can be achieved by the Wix date picker component. Others are more complex and need some coding work. I will show you both methods so that your customers are happy. And more money for your business!

Wix date picker

This is the easiest way to format the date. You drag and drop the date picker from the menu. Then you click and select a few things. And you are done. 

Wix date picker works best when you want to display the current date. Or, your required format is one those four options: “MM/DD/YYYY”, “DD/MM/YYYY”, “YYYY/MM/DD”, or “YYYY/M/D”.

The last format only has one “M” and one “D”. How is it possible? It just means that Wix will eliminate the leading 0s in the month and the date. For example, January is shown as “1” instead of “01”. And December is shown as “12” because there is no leading 0 in December value. 

Let’s have some hand-on exercise with the date picker.

Use Wix Date Picker to enter a date

Click on “Add” icon. Select “User Input” on the dark blue menu. Select “Date & Time” on the light blue menu. Drag and drop one date picker to your site.

Drag and Drop Date Picker

In order to save the date to your collection, you need a collection with a date-&-time-type field and a dataset. I assume you already know how to do it. For this exercise I created a very simple date collection and a date dataset. See my screenshots below.

Date & Time Type

Then I use the button “Connect to Data” on the date picker to connect to my dataset. I set “Value connects to” to “Date” field of my collection.

The last step is to pick the date format that I want. I will tell you my favorite. It is “DD/MM/YYYY”. 

Select Date Format

Use Wix Date Picker to display a date

Same steps as the above. Click on “Add” icon. Select “User Input” on the dark blue menu. Select “Date & Time” on the light blue menu. Drag and drop one date picker to your site.

I will show you how to display today date on the date picker. This is an easy one. You click on “Settings”. In the section “Show text on load”, you select Today’s date.

Display Today’s Date

The more complex exercise is to display a date from your collection. I reuse the collection and the dataset from the above exercise. Again you connect your new date picker to the dataset.

But because you use this date picker to display only, the “Read only” option is selected in the date picker settings.

Display only

And don’t forget the last step which is to select the date format. It is “DD/MM/YYYY”. 

Wix codes to format date 

Once in a while someone asks you to format the date in a way that the date picker cannot handle. For example, you need to display “Dec 25, 2019” instead of “12/25/2019”. The date picker doesn’t have a format for that. Then your only option is to use Wix codes.

It is not difficult. There is only one javascript function to learn. After that, it will serve you well for a very long time. The function is .toLocaleDateString( ).

The function takes two parameters: locales and options. 

Locales parameter

Examples of locales parameter are ‘en-US’, ‘en-GB’, ‘en-IN’, ‘fr’, ‘ja’, ‘de’. 

Those tiny short strings tell the function which local format to use. ‘en’ is for English speaking community. ‘fr’ is for French speaking community. ‘ja’ is for Japanese speaking community. ‘de’ is for German speaking community. 

The problem is that lots of countries use English. You don’t want to use the US format for the Great Britain. You must be specific. In this case, you can use an extension to specify the country. For example, ‘en-US’ is for the USA. ‘en-GB’ is for the Great Britain. Or ‘en-IN’ is for India.

Options parameter

Options parameter is a group of properties that helps customize your date to the teeth. Date related properties are 

• dateStyle 
• weekday
• era
• year
• month
• date

dateStyle property

The options you can use here are: “full”, “long”, “medium”, “short”. The exercise below will show you the effect of each option on your date format.

I drag & drop a date picker to my Wix page. Its ID is “datePicker”. I also drag & drop a text (Title) to my page. Name the text ID as “dateFormat”. Basically, the text will display a different format of the date on the date picker.

I add an onChange event “datePicker_change” to my date picker. Inside this event, I will write the codes to reformat the date.

export function datePicker_change(event) {

    //test option 

    let options = { dateStyle: “full” };

    $w(‘#dateFormat’).text = $w(‘#datePicker’).value.toLocaleDateString( ‘en’ , options );

}

The results for each option are below.

let options = { dateStyle: “full” };

dateStyle Full

let options = { dateStyle: “long” };

dateStyle Long

let options = { dateStyle: “medium” };

dateStyle Medium

let options = { dateStyle: “short” };

dateStyle Short

weekday property

You tell the function how you want to display the weekday component of the date. For example, “Thursday” or “Thu” or “T”. Your options are “long”, “short”, “narrow”.

Let’s see the effect of each option below. I am going to use the same setup. I only change the options variable.

let options = {  weekday: “long” };

Weekday long

let options = {  weekday: “short” };

Weekday short

let options = {  weekday: “narrow” };

Weekday narrow

era property

Display the era of the date. Your options are “long”, “short”, “narrow”. Let’s see the effect of each.

let options = { era: “long” };

Era long

let options = { era: “short” };

Era short

let options = { era: “narrow” };

Era narrow

year property

In case you want to manipulate the format of the year, this is what you need. Your options are “numeric” or “2-digit”. Let’s give them a few tests.

let options = { year: “numeric” };

Year numeric

let options = { year: “2-digit” };

Year 2 digits

month property

This property is what you need to change the month format of your date. Your format options are “numeric”, “2-digit”, “long”, “short”, “narrow”. Let me put the options into Wix and see the effects.

let options = { month: “numeric” };

Month numeric

let options = { month: “2-digit” };

Month 2-digit

let options = { month: “long” };

Month long

let options = { month: “short” };

Month short

let options = { month: “narrow” };

Month narrow

day property 

The day component isn’t untouchable either. You can customize the day component by setting the options to either “numeric” or “2-digit”.

let options = { day: “numeric” };

Day numeric

let options = { day: “2-digit” };

Day 2 digit

Put your options together

You have learned how each option affects your date format. But you are not sure how they work together. In reality, you do need to use them together to create the desired format. Take a look at a few example below.

Let’s say you are going to build a website about wedding. And you want to use words to tell the wedding date instead of just the cold numbers. Therefore, “Saturday, February 01, 2020” instead of “Sat 02/01/20”.

Your options are 

let options = { weekday: “long”, month: “long”, day: “2-digit”, year: “numeric” };

Another example, you want the live-event dates to be short and sweet on your rock music site. The remaining space is for event description and video advertising. Therefore, the desired date is like “Fri, Feb 14”. No year.

Your options are

let options = { weekday: “short”, month: “short”, day: “2-digit” };

Last example, assume you are building a website for your high school history project. You want to say Rome fell in “September, 476 AD”. 

Your options are 

let options = { month: “long”, year: “numeric”, era: “short” };

Conclusion

Once you know the toLocaleDateString() function and its options, manipulating date is no longer a difficult task. All you need to do is to put together components that you need like weekday, month, date, year. Then you select the right option for each component. Experiment and have fun with it. If you have any question, you can leave a comment below. I will help whenever I can.