How to convert a MySQL date to JavaScript date?


In this tutorial, we will learn to convert the MySQL date to JavaScript date. The MySQL date is not different from the regular date, but its format or syntax is different, which we need to convert into the format of a normal date.

The general syntax of the MySQL date is YYYY - MM - DD HH: mm: ss. So, we need to convert the given MySQL date string syntax to normal date syntax. We will have two approaches to converting the MySQL date to the JavaScript date.

  • Using the replace() Method

  • Using the split() Method

Using the replace() Method

The replace() method is the JavaScript library built-in method that users can use with the strings. It takes two parameters; the first is the string that needs to be replaced, and another is the new string that will take the position of the old string.

We will replace all the dash lines with the backslash character to format the string. After that, we will use the Date.parse() method to parse the date from the string and pass it as a parameter of the Date() class constructor to create a new date object.

Syntax

Users can follow the syntax below to convert MySQL date to JavaScript date.

let MySQLDate = "2022-07-08 11:55:17";
// format the date string
let date = MySQLDate.replace( /[-]/g, '/' );
// parse the proper date string from the formatted string.
date = Date.parse( date );
// create new date
let jsDate = new Date( date );

Parameters

  • /[-]/g − It is a regular expression to replace all the dash lines with the backslash symbol. So, we can parse the date from it.

Example

In the example below, we have assigned the MySQL date to a single variable and tried converting it into the JavaScript date using the above approach. In the output, users can see the standard date format of a given MySQL date.

<html> <body> <h2>Converting the MySQL date to JavaScript date.</h2> <h4>Converting the 2022 - 07 - 08 11:55:17 to JavaScript date using <i> replace() </i> method.</h4> <div id = "dateOutput"></div> <script> let dateOutput = document.getElementById("dateOutput"); let MySQLDate = "2022-07-08 11:55:17"; let date = MySQLDate.replace(/[-]/g, '/'); date = Date.parse(date); let jsDate = new Date(date); dateOutput.innerHTML = jsDate; </script> </body> </html>

Using the split() Method

Users can apply the split() method of JavaScript on any string. We have a date in the string format so that we can use it for the date. The split() method takes a single parameter by which we need to split the string. It returns the array of date parts, which we can pass to the Date() constructor using the spread operator and create the new JavaScript date.

Syntax

Users can follow the syntax below to convert the MySQL date to the JavaScript date using the split() method.

let MySQLDate = "2021-11-29 1:25:37";
// split the date with ‘-’ and ‘:’
let date = MySQLDate.split( /[- :]/ );
//subtract 1 from the month as it takes the value between 0 to 11.
date[1]--;
// pass all parts of the date as a parameter. 
let jsDate = new Date( ...date );

Parameters

  • /[- : ]/ − It is a regular expression to split the MySQL date from ‘-’, and ‘:’ character and get array of all date parts.

  • …date − date is the array of date parts and we are passing all the elements of the array to Date() using the spread (…) operator.

Example

In the example below, we have split the MySQL date from the dash and colon and get the array buffer of the date parts. We have created the new JavaScript date using the date class and array of old date parts.

<html> <body> <h2>Converting the MySQL date to JavaScript date.</h2> <h4>Converting the 2022 - 11 - 29 1:25:37 to JavaScript date using <i> date.split() </i> method.</h4> <div id = "dateOutput"></div> <script> let dateOutput = document.getElementById("dateOutput"); let MySQLDate = "2022-11-29 1:25:37"; let date = MySQLDate.split(/[- :]/); date[1]--; let jsDate = new Date(...date); dateOutput.innerHTML = jsDate; </script> </body> </html>

We have learned to convert the MySQL date to JavaScript date. In simple terms, we have the idea of changing the date format. Now, users should be able to solve the problems of changing the date format.

Updated on: 17-Aug-2022

5K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements