13 - Dates In Javascript

Date and time are indispensible aspects of man’s life. They bring about so much significance to the occurrence of events and need to be noted down in order to remember when something happened. You would have come across websites that would ask for your date of birth or other dates. If you are booking a ticket to the movies or a flight reservation then time and date play a very vital role. Javascript has several functions that can help store and retrieve dates and time according to the preferences.

<!DOCTYPE html>
<html>
    <head>        
        <script type="text/javascript">
        </script>
    </head>   
    <body>
       The simplest way to create a date.
       <hr>
        <script type = "text/javascript">
        var dateNow = new Date();
        document.write("The date and time created from the current time is " + dateNow + ".<br/>");
        var customDate = new Date(1967,1,12,14,34,24,45);
        document.write("The date and time created on custom basis is " + customDate + ".<br/>");
        </script>
    </body>
</html>


Retrieving parts of the date

Once a date has been stored it could be necessary to access different parts of the date and time individually. To do so, there are functions to access each and every part of the date and time stored.

Function

Purpose

getDate()

getUTCDate()

Retrieve the day part of the date.

 

getDay()

getUTCDay()

Specify which day of the week the particular date falls on. The days of the week are numbered from 0 to 6.

 

getMonth()

getUTCMonth()

Retrieve the month part of the date.

 

getFullYear()

getUTCFullYear()

Retrieve the year part of the date in four digits.

 

getYear()

Retrieve the year in two digits for years from 0 -99 and in four digits for 2000 onwards.

 

getHours()

getUTCHours()

Retrieve the hour part of the date.

 

getMinutes()

getUTCMinutes()

Retrieve the minute part of the date.

 

getSeconds()

getUTCSeconds()

Retrieve the second part of the date.

 

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <hr>
        <script type = "text/javascript">
          var dateNow = new Date(2007,8,9, 12, 1, 13, 1);
          document.write("The date created is " + dateNow + ".<br/>");
          document.write("The date part of the date is " + dateNow.getDate() + ".<br/>");
          document.write("The UTC date part of the date is "+ dateNow.getUTCDate() + ".<br/>");
          document.write("The day part of the date is " + dateNow.getDay()+ ".<br/>");
          document.write("The UTC day part of the date is " + dateNow.getUTCDay()+ ".<br/>");
          document.write("The month part of the date is " + dateNow.getMonth()+ ".<br/>");
          document.write("The UTC month part of the date is " + dateNow.getUTCMonth()+ ".<br/>");
          document.write("The year part of the date in is " + dateNow.getYear()+ ".<br/>");
          document.write("The full year part of the date is " + dateNow.getFullYear()+ ".<br/>");
          document.write("The UTC full year part of the date is " + dateNow.getFullUTCYear()+ ".<br/>");
          document.write("The hours part of the date is " + dateNow.getHours()+ ".<br/>");
          document.write("The UTC hours part of the date is " + dateNow.getUTCHours()+ ".<br/>");
          document.write("The minutes part of the date is " + dateNow.getMinutes()+ ".<br/>");
          document.write("The UTC minutes part of the date is " + dateNow.getUTCMinutes()+ ".<br/>");
          document.write("The seconds part of the date is " + dateNow.getSeconds()+ ".<br/>");
          document.write("The UTC seconds part of the date is " + dateNow.getUTCSeconds()+ ".<br/>");
        </script>
    </body>
</html>


Manipulating the date elements

Date variables are created and stored. They would sometimes need to be manipulated. In order to do so, there are several functions.

Function

Purpose

setDate()

setUTCDate()

Manipulates the date part of the date

setMonth()

setUTCMonth()

Manipulates the month part of the date

setFullYear()

setUTCFullYear()

Manipulates the year part of the date

setHours()

setUTCHours()

Manipulates the hour part of the date

setMinutes()

setUTCMinutes()

Manipulates the minute part of the date

setSeconds()

setUTCSeconds()

Manipulates the second part of the date

<!DOCTYPE html>
<html>
    <head>       
        <script type="text/javascript">
        </script>
    </head>   
    <body>
        Manipulating specific parts of the date.
        <hr>
        <script type = "text/javascript">
          var dateNow = new Date(2007,8,9, 12, 1, 13, 1);
          document.write("The date created is " + dateNow + ".<br/>");
          document.write("The date part of the date is changed .<br/>");
          dateNow.setDate(20);
          document.write("The date is " + dateNow + ".<br/>");
          document.write("The month part of the date is changed.<br/>");
          dateNow.setMonth(12);
          document.write("The date is " + dateNow + ".<br/>");
          document.write("The full year part of the date is changed.<br/>");
          dateNow.setFullYear(1999);
          document.write("The date is " + dateNow + ".<br/>");
          document.write("The hours part of the date is changed.<br/>");
          dateNow.setHours(5);
          document.write("The date is " + dateNow + ".<br/>");
          document.write("The minutes part of the date is changed.<br/>");
          dateNow.setMinutes(34);
          document.write("The date is " + dateNow + ".<br/>");
          document.write("The seconds part of the date is changed.<br/>");
          dateNow.setSeconds(56);
          document.write("The date is " + dateNow + ".<br/>");
        </script>
    </body>
</html>

Printing the date in different formats

Function

Purpose

toGMTString()

Displays the GMT date and time

toUTCString()

Displays the UTC date and time

toLocaleString()

Displays the local time and date for a date

toString()

Displays the date as string

UTC()

When day, month, year (other elements optional) have been specified, displays the number of milliseconds since 1st of Jan 1970

valueOf()

Displays the number of milliseconds since 1st of Jan 1970

<!DOCTYPE html>
<html>
    <head>       
       <script type="text/javascript">
       </script>
    </head>    
    <body>
        Displaying date in different formats.
        <hr>
        <script type = "text/javascript">
        var dateNow = new Date();
        document.write("The date has been created using the current date and time.<br/>");
        document.write("The date in GMT format is " + dateNow.toGMTString() + ".<br/>");
        document.write("The date in UTC format is " + dateNow.toUTCString() + ".<br/>");
        document.write("The date as local date and time is " + dateNow.toLocaleString() + ".<br/>");
        document.write("The date converted to string is " + dateNow.toString() + ".<br/>");
        document.write("The date in milliseconds using the UTC 1 JAN 1970 is " + dateNow.UTC() + ". This works for a date for which day, month and year have been specified.<br/>");
        document.write("The date in milliseconds since 1 JAN 1970 is " + dateNow.valueOf() + ".<br/>");
        </script>
    </body>
</html>


Like us on Facebook