Converting a string to a date in JavaScript

Javascript Web Development Front End Technology

In this article, we are going to discuss how to convert a string value to a Date object in JavaScript. There are two ways to achieve this −

Using the constructor of the Date class − This constructor accepts a string value representing the date value, converts it into a Date object, and returns the result.

Using the Date.parse() method − Same as the Date constructor this method accepts a string value parses and returns the date value in the form of milliseconds.

Let us see these solutions with examples −

Using the Date() constructor

The most commonly used way to convert a string into a date object is using the constructor of the Date() class. Following is the syntax of the Date constructor −

var date = new Date('date_string');

This accepts arguments in various forms.

The new Date() returns the current system date and time, including the time zone information of your local system. If you are not passing the parameter in the new Date() function.
Passing date object as the argument. The new Date() will return a date object as rendered by the date string passed as an argument.
When we pass a date in string format to the new Date(), it is converted into a date object. And the string format needs to be yyyy−mm−dd, for it to work. Other date formats may not be converted to a date object by this method.

Example

In the example, we are checking which date form is valid in the Date class’s constructor.

<!DOCTYPE html>
<html lang="en">
<head>
   <title></title>
</head>
<body>
   <script>
      var date1 = new Date("2022-08-04"); // here we are taking yyyy-mm-dd format
      var date2 = new Date("2022/08/03"); // here we are taking yyyy/mm/dd format
      var date3 = new Date("2022-15-03"); // here we are taking yyyy/dd/mm format
      var date4 = new Date("15-02-2022"); // here we are tacking dd/mm/yyyy format

      document.write(date1 + "<br>");
      document.write(date2 + "<br>");
      document.write(date3 + "<br>");
      document.write(date4 + "<br>");
   </script>
</body>
</html>

Note − The new Date() can be used to convert the string into a date only if it qualifies the ISO 8601 format yyyy−mm−dd hh−mm−ss

Using the date.parse() method

Date.Parse() is an alternate solution to convert the string date. It returns a numeric value but not a date object. So, it will require further processing if you expect a date object.

This method converts the given date to a numerical value representing the milliseconds. The return value is the number of milliseconds since 1−Jan−1970 midnight time. It is the same as the time stamp format with the difference that instead of seconds, Date.parse() returns a millisecond value.

Example

In the following example, we are converting string date to date format. But here the return value is in milliseconds.

<!DOCTYPE html>
<html lang="en">
<body>
<p>Date.Parse Method</p>
   <script>
      var date1 = Date.parse("2022-08-04"); // here we are taking yyyy-mm-dd format
      var date2 = Date.parse("2022/08/03"); // here we are taking yyyy/mm/dd format
      var date3 = Date.parse("2022-15-03"); // here we are taking yyyy/dd/mm format
      var date4 = Date.parse("15-02-2022"); // here we are tacking dd/mm/yyyy format

      document.write(date1 + "<br>");
      document.write(date2 + "<br>");
      document.write(date3 + "<br>");
      document.write(date4 + "<br>");
   </script>
</body>
</html>

Note −

The Date. parse() is the same as the new Date() except for the return type, which makes it the best fit for checking if a date value is of the correct format and can also be used to allocate a date by using the dateObj.setTime(Date. parse(DateString)).
The Date.Parse() returns milliseconds that can be used for precision comparison of dates even without converting them to actual date objects with new Date().

Example

In the following example, we can see that the Date.parse() is the same as the new Date() when it comes to the type of input value it can accept but if the date is of a valid format.

Especially when we are dealing with an API response value. In such cases, we may need to perform a check to ensure the value returned by the backend confirms the date format accepted by the Date.parse() or even the new Date() function. Just an isNaN() check can help identify and safely land into the date conversion method.

<!DOCTYPE html>
<html lang="en">
<body>
   <p>Date.Parse Method and new Date() Method</p>
   <script>
      let stringsFromAPI = ["2022-08-04", "20-11-2022"];
      stringsFromAPI.forEach((d) => {
         if (!isNaN(Date.parse(d))) {
            console.log(new Date(d));
         }
      });
   </script>
</body>
</html>