How to check whether a JavaScript date is valid?

Front End Technology Javascript Web Development

In this tutorial, we will learn to check whether a JavaScript date is valid or not.

Let’s understand why we need to validate the date in JavaScript by example. Suppose you have developed an application that takes some information in the submission form from the user. Users can make a mistake. What if they enter the wrong date in the input box? In such a case, developers need to validate the date.

Here, we have three different methods to validate the date.

Using the getTime() Method
Using the isFinite() Method
Using the Moment JS isValid() Method

Using the getTime() Method

In JavaScript, we can create the new date by creating the object of the Date() class. We can apply different methods of Date class to the date object. We will use the getTime() method of date class in this approach to validate the date.

We will check for the type of the variable. If the variables are of Date object type, we will check whether the getTime() method for the date variable returns a number or not. The getTime() method returns the total number of milliseconds since 1, Jan 1970. If it doesn’t return the number, it means the date is not valid.

Syntax

Users can follow the below syntax to use the getTime() method to validate the date.

if ( Object.prototype.toString.call(date) === "[object Date]" ) {
   if ( !isNaN(date.getTime()) ) {

      // date is valid
   } else {
      Date is not valid
   }
} else {

   // date is not valid
}

Parameters

date − It is a date variable and always required.

Example

In the below example, we have created one valid and another invalid date. We have created the function name isValid() function to validate the date. In the function, we are checking whether the object type is a Date or not. Also, we are checking whether the getTime() method returns a number or not using the isNaN() method.


<html>
<head>
</head>
<body>
   <h2> check whether a JavaScript date is valid. </h2>
   <h4> Validate the date object using <i> getTime() </i> method. </h4>
   <p id = "validate"> </p>
   <script>
      let validate = document.getElementById("validate");
      
      // creating the current date
      let date = new Date();
      function isValid(date) {
         if ( Object.prototype.toString.call(date) === "[object Date]") {
            if ( !isNaN(date.getTime()) ) {
               validate.innerHTML += date + " is valid. <br/> ";
            } else {
               validate.innerHTML += date + " is not valid. <br/> ";
            }
         } else {
            validate.innerHTML += date + " is not valid. <br/> ";
         }
      }
      isValid(date);
      date = new Date("No date");
      isValid(date);
   </script>
</body>
</html>

Using the isFinite() Method

In JavaScript, the instanceof operator allows us to check whether the variable is an instance of the Date() class or not. We will check for that first, and if it is, we will check that the getTime() method returns the finite number of milliseconds or not.

If the date variable is not the Date object type or the getTime() method returns a different value rather than a number, it returns false.

Syntax

Users can follow the below syntax to validate date using the isFinite() method

if ( date instanceof Date &&isFinite(date.getTime()) ) {
   
   // date is valid
} else {
   // date is not valid
}

Example

In the example below, we have used the instanceof operator to check the type of variable is date or not in the if-else condition. Also, we have used the isFinite() method to check the number of milliseconds is finite. We have tested for various dates, and users can see the result in the output of the example below.


<html>
<head>
</head>
<body>
   <h2> check whether a JavaScript date is valid. </h2>
   <h4> Validate the date object using <i>isFinite() </i> method. </h4>
   <p id = "validate"> </p>
   <script>
      let validate = document.getElementById("validate");
      function isValid(date) {
 
         // check typeof date and check for finite values of date.getTime() method
         if ( date instanceof Date &&isFinite( date.getTime()) ) {
            validate.innerHTML += date + " is valid. <br/> ";
         }
         else {
            validate.innerHTML += date + " is not valid. <br/> ";
         }
      }
      let date = new Date("No date");
      isValid(date);
      date = new Date();
      isValid(date);
   </script>
</body>
</html>

Using the Moment JS isValid() Method

In JavaScript, Moment Js is the special library to manipulate the date. To validate the date using the Moment JS isValid() method, users don't need to make much effort.

Syntax

Users can use the syntax below to use the isValid() method of Moment JS.

let date = moment();
let valid = date.isValid();

Example

In the example below, we have added the CDN for the Moment Js library to use it with the vanilla javaScript. We have created the two dates using the moment() method; One is valid, and another is invalid. We are using the isValid() method to validate both dates.


<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.3/moment-with-locales.min.js"
   integrity="sha512-vFABRuf5oGUaztndx4KoAEUVQnOvAIFs59y4tO0DILGWhQiFnFHiR+ZJfxLDyJlXgeut9Z07Svuvm+1Jv89w5g=="
   crossorigin="anonymous" referrerpolicy="no-referrer"> </script>
</head>
<body>
   <h2> check whether a JavaScript date is valid. </h2>
   <h4> Validate the date object using <i> moment.isValid() </i> method. </h4>
   <p id = "validate"> </p>
   <script>
      let validate = document.getElementById("validate");
      let date = moment('2015-11-32', 'YYYY-MM-DD');
      validate.innerHTML += " 2022-07-32 is valid : " + date.isValid() + "<br/>";
      date = moment("2021-11-30", 'YYYY-MM-DD');
      validate.innerHTML += " 2021 - 11- 31 is valid : " + date.isValid();
   </script>
</body>
</html>

Users have learned three approaches to validate the date. The first and second approaches take more time and effort than the third. Using the Moment Js library to manipulate the dates is recommended rather than using the old Date class.