/    /  Javascript-Date Time

Javascript-Date Time

 

JavaScript Date object can be used with date and time including days, months, years, hours, minutes, seconds, and also milliseconds.

 

Example: Current Local Date:

 

<!DOCTYPE html>
<html>
<body>
       <h1>Demo: Current Date</h1>
       <p id="p1"></p>
       <p id="p2"></p>         
        <script>                        
                document.getElementById("p1").innerHTML = Date()                        
                var currentDate = new Date();
                document.getElementById("p2").innerHTML = currentDate;
  </script>
</body>
</html>

 

Compare Dates:

 

<!DOCTYPE html>
<html>
<body>
       <h1>Demo: JavaScript Date comparison</h1>
       <p id="p1"></p>
       <p id="p2"></p>

       <script>
               var date1 = new Date('4-1-2015');
               var date2 = new Date('4-2-2015');

               if (date1 > date2)
                       document.getElementById("p1").innerHTML = date1.toDateString() + ' is greater than ' + date2.toDateString();
               else (date1 < date2 )
                       document.getElementById("p2").innerHTML  = date1.toDateString() + ' is less than ' + date2.toDateString();
  </script>
</body>
</html>

 

OUTPUT:

 

Demo: JavaScript Date comparison

Wed Apr 01 2015 is less than Thu Apr 02 2015

 

OUTPUT:

 

Demo: Current Date

Sat Jan 02 2021 13:25:43 GMT+0530 (India Standard Time)

 

Sat Jan 02 2021 13:25:43 GMT+0530 (India Standard Time)

 

In order to work with a date other than the current date and time, we must generate a date object by specifying various parameters in the Date constructor.

  • Date()
  • Date(milliseconds)
  • Date(dateString)
  • Date(year, month, day, hours, minutes, seconds, milliseconds)

 

Syntax:

 

var dt = new Date();
var dt = new Date(milliseconds);
var dt = new Date('date string');
var dt = new Date(year, month[, date, hour, minute, second, millisecond]);

 

Example: Create Date by Specifying Milliseconds:

 

<!DOCTYPE html>
<html>
<body>
       <h1>Demo: JavaScript Date Object</h1>
       <p id="p1"></p>
       <p id="p2"></p>
       <p id="p3"></p>         
       <script>
              var date1 = new Date(0);
              var date2 = new Date(1000);
              var date3 = new Date(5000);
              document.getElementById("p1").innerHTML = date1;
              document.getElementById("p2").innerHTML = date2;
              document.getElementById("p3").innerHTML = date3;
  </script>
</body>
</html>

 

OUTPUT:

 

Demo: JavaScript Date Object

Thu Jan 01 1970 05:30:00 GMT+0530 (India Standard Time)

 

Thu Jan 01 1970 05:30:01 GMT+0530 (India Standard Time)

 

Thu Jan 01 1970 05:30:05 GMT+0530 (India Standard Time)

 

Example: Create Date by Specifying Date String

 

<!DOCTYPE html>
<html>
<body>
       <h1>Demo: JavaScript Date Object</h1>
       <p id="p1"></p>
       <p id="p2"></p>
       <p id="p3"></p>
       <p id="p4"></p>
       <p id="p5"></p>
       <p id="p6"></p>
       <p id="p7"></p>
       <p id="p8"></p>
       <p id="p9"></p>         
       <script>
                var date1 = new Date("3 march 2015");
                var date2 = new Date("3 February, 2015");
                var date3 = new Date("3rd February, 2015"); // invalid date
                var date4 = new Date("2015 3 February");
                var date5 = new Date("3 2015 February ");
                var date6 = new Date("February 3 2015");
                var date7 = new Date("February 2015 3");
                var date8 = new Date("3 2 2015");
                var date9 = new Date("3 march 2015 20:21:44");
                document.getElementById("p1").innerHTML = date1;
                document.getElementById("p2").innerHTML = date2;
                document.getElementById("p3").innerHTML = date3;
                document.getElementById("p4").innerHTML = date4;
                document.getElementById("p5").innerHTML = date5;
                document.getElementById("p6").innerHTML = date6;
                document.getElementById("p7").innerHTML = date7;
                document.getElementById("p8").innerHTML = date8;
                document.getElementById("p9").innerHTML = date9;
  </script>
</body>
</html>

 

OUTPUT

 

Demo: JavaScript Date Object

Tue Mar 03 2015 00:00:00 GMT+0530 (India Standard Time)

 

Tue Feb 03 2015 00:00:00 GMT+0530 (India Standard Time)

 

Invalid Date

 

Tue Feb 03 2015 00:00:00 GMT+0530 (India Standard Time)

 

Tue Feb 03 2015 00:00:00 GMT+0530 (India Standard Time)

 

Tue Feb 03 2015 00:00:00 GMT+0530 (India Standard Time)

 

Tue Feb 03 2015 00:00:00 GMT+0530 (India Standard Time)

 

Mon Mar 02 2015 00:00:00 GMT+0530 (India Standard Time)

 

Tue Mar 03 2015 20:21:44 GMT+0530 (India Standard Time)

 

Date Methods:

 

The JavaScript Date object includes different methods to operate on it. Use various methods to get different segments of date object like day, year, month, hour, seconds, and milliseconds in either local time or UTC(universal time) time.

 

Example:

 

<!DOCTYPE html>
<html>
<body>
       <h1>Demo: JavaScript Date Object</h1>
       <p id="p1"></p>
       <p id="p2"></p>
       <p id="p3"></p>
       <p id="p4"></p>
       <p id="p5"></p>                     
       <script>
                var date = new Date('4-1-2015');
                document.getElementById("p1").innerHTML = date.getDay();
                document.getElementById("p2").innerHTML = date.getYear();
                document.getElementById("p3").innerHTML = date.getFullYear();
                document.getElementById("p4").innerHTML = date.getMonth();
                document.getElementById("p5").innerHTML = date.getUTCDate();
  </script>
</body>
</html>

 

OUTPUT:

 

Demo: JavaScript Date Object

3

115

2015

3

31

 

Date Formats:

 

Example: ISO Date Format

 

var dt = new Date('2015-02-10T10:12:50.5000z');

 

Convert Date Format:

 

Convert a date from one format to another format.

 

Example: Date Conversion in Different Formats

 

<!DOCTYPE html>
<html>
<body>
       <h1>Demo: JavaScript Date formats</h1>
       <p id="p1"></p>
       <p id="p2"></p>
       <p id="p3"></p>
       <p id="p4"></p>
       <p id="p5"></p>
       <p id="p6"></p>
       <p id="p7"></p>
       <p id="p8"></p>
       <p id="p9"></p>
       <p id="p10"></p>

       <script>
               var date = new Date('2015-02-10T10:12:50.5000z');

               document.getElementById("p1").innerHTML = 'Default format:' + date;
               document.getElementById("p2").innerHTML = 'toDateString: '+ date.toDateString();
               document.getElementById("p3").innerHTML = 'toLocaleDateString: ' + date.toLocaleDateString();
               document.getElementById("p4").innerHTML = 'toGMTString: ' + date.toGMTString();
               document.getElementById("p5").innerHTML = 'toISOString: ' + date.toISOString();
               document.getElementById("p6").innerHTML = 'toLocaleString: ' + date.toLocaleString();
               document.getElementById("p7").innerHTML = 'toLocaleTimeString: ' + date.toLocaleTimeString();
               document.getElementById("p8").innerHTML = 'toString: ' + date.toString('YYYY-MM-dd');
               document.getElementById("p9").innerHTML = 'toTimeString: ' + date.toTimeString();
               document.getElementById("p10").innerHTML = 'toUTCString: ' + date.toUTCString();
  </script>
</body>
</html>

 

OUTPUT:

 

Demo: JavaScript Date formats

Default format:Tue Feb 10 2015 15:42:50 GMT+0530 (India Standard Time)

 

toDateString: Tue Feb 10 2015

 

toLocaleDateString: 2/10/2015

 

toGMTString: Tue, 10 Feb 2015 10:12:50 GMT

 

toISOString: 2015-02-10T10:12:50.500Z

 

toLocaleString: 2/10/2015, 3:42:50 PM

 

toLocaleTimeString: 3:42:50 PM

 

toString: Tue Feb 10 2015 15:42:50 GMT+0530 (India Standard Time)

 

toTimeString: 15:42:50 GMT+0530 (India Standard Time)

 

toUTCString: Tue, 10 Feb 2015 10:12:50 GMT

 

Compare Dates:

 

<!DOCTYPE html>
<html>
<body>
      <h1>Demo: JavaScript Date comparison</h1>
      <p id="p1"></p>
      <p id="p2"></p>

      <script>
               var date1 = new Date('4-1-2015');
               var date2 = new Date('4-2-2015');

               if (date1 > date2)
                       document.getElementById("p1").innerHTML = date1.toDateString() + ' is greater than ' + date2.toDateString();
               else (date1 < date2 )
                       document.getElementById("p2").innerHTML  = date1.toDateString() + ' is less than ' + date2.toDateString();

                       
  </script>
</body>
</html>

 

OUTPUT:

 

Demo: JavaScript Date comparison

Wed Apr 01 2015 is less than Thu Apr 02 2015