Vorbly Code | WIX DATEPICKER CHANGE DATE FORMAT

Vorbly <Code>

CODING MADE EASY WITH VORBLY

WIX DATEPICKER CHANGE DATE FORMAT

Need to change the date format for your datepicker? This tutorial will show you how to change the date format for your Wix Datepicker using Wix Code. Display date in US, UK or International date formats. We will provide you with the webpage elements and sample codes required to implement this feature.

THE DEMO

1/2

THE ELEMENTS

The Page

DatePicker: #datePicker1

Text Elements​

  • US Date Title ID: #USTitle

  • UK Date Title ID: #UKTitle

  • US Date Format ID: #DateUS

  • UK Date Format ID: #DateUK

Button Elements

  • Print Date Button: #PrintDate

THE CODE

Page Code

export function PrintDate_click(event, $w) {

    const date = String($w("#datePicker1").value);

    console.log(date); // Wix DatePicker Format - Thu Jun 28 2018 00:00:00 GMT-0500 //

 

// US Format //

 

    const mmmdd = date.substr(4, 6);

    const year = date.substr(11, 4);

    const newdateUS = String(mmmdd + ", " + year);

    $w("#DateUS").text = newdateUS;

// UK Format //

    const dd = date.substr(8,2);

    const mmm = date.substr(4,3);

    const newdateUK = String(dd + " " + mmm + ", " + year);

    $w("#DateUK").text = newdateUK;

 

}

COMMENTS

I'm a paragraph. Click here to add your own text and edit me. It's easy.

No comments. Be the first to leave a comment.

Can anyone help me with this date format, 2008-6-30?

How should I modify this code?
const mmmdd = date.substr(3, 7);
const year = date.substr(11, 4);
const newdateUS = String(mmmdd + ", " + year);
$w("#DateUS").text = newdateUS;

Thanks.

Cory Kaye

Aug 17, 2018

0

Hi Cory,

Thanks for your message. A great tip would be to take a look at the Wix DatePicker Format - Thu Jun 28 2018 00:00:00 GMT-0500. Then get each segment of your date format separately. For example, const year = date.substr(11, 4). Hope this helps!

Ben (Vorbly)

Aug 17, 2018

1

Thanks Ben! Let me give it a try.

Cory Kaye

Aug 17, 2018

1

You're welcome Cory! Let us know if you encounter any issues.

Ben (Vorbly)

Aug 17, 2018

1

WEB DESIGN & DEVELOPMENT SOLUTIONS

GET PROFESSIONAL HELP