Ways to format time and date using JavaScript

[ganeshbala]

Ways to format time and date using JavaScript

JavaScript has an inbuilt support for dates and times with its Date object. The methods of the Date object return various values associated with date and time.

To start working with dates and time, we first initialize a variable and assign it a value with the new operator and the Date() constructor. The main function of the new operator with Date() constructor is to create a new date object that is stored in the variable. Here is the code:

var d = new Date();

Thus, variable d contains a new date object. We can now call the various methods of this date object.

Format #1: date-month-year

The three methods that we would be using are:

    * getDate(): Returns the date
    * getMonth(): Returns the month
    * getFullYear(): Returns the year

Code Select Expand

<script type="text/javascript">
<!--

var d = new Date();

var curr_date = d.getDate();

var curr_month = d.getMonth();

var curr_year = d.getFullYear();

document.write(curr_date   "-"   curr_month   "-"   curr_year);

//-->
</script>

This prints: 14-2-2009

In the code above, we have a different variable for the day, month and year. These variables all contain numeric quantities. (You can check this using typeof()). Hence, you can perform any kind of numerical operations on these variables.

The eagle-eyed would have noticed that the month value returned by getMonth() is one less than the current month. This is because months start at 0 value, thus, January is represented by 0, February as 1, March as 2 ...
We would have to increment the value returned by getmonth() by 1. The corrected lines of code are:

Code Select Expand

<script type="text/javascript">
<!--
var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth();
curr_month  ;
var curr_year = d.getFullYear();
document.write(curr_date   "-"   curr_month   "-"   curr_year);
//-->
</script>

Prints: 14-3-2009


Format #2: month/day/year

This is very similar to the above:

Code Select Expand

<script type="text/javascript">
<!--
var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth();
curr_month  ;
var curr_year = d.getFullYear();
document.write(curr_month   "/"   curr_date   "/"   curr_year);
//-->
</script>

Prints: 3/14/2009

[ganeshbala]

Format #3: date-month name-year (something like, 21-March-2001)

The getMonth() function gives us the month in a numeric form. To convert this value into the month name, we will employ an array. The array would contain all the 12 month names.

Code Select Expand

<script type="text/javascript">
<!--

var m_names = new Array("January", "February", "March",
"April", "May", "June", "July", "August", "September",
"October", "November", "December");

var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth();
var curr_year = d.getFullYear();
document.write(curr_date   "-"   m_names[curr_month]
  "-"   curr_year);

/* The last two lines above have
to placed on a single line */

//-->
</script>

Note: For the sake of clarity, I've written the JavaScript code for the array in multiple lines. For usage, you would have to put this on a single line.

This time, we use the new operator with the Array() constructor and store the 12 month names in the array. Variable m_names stores the array of month names.
The value returned by getMonth() is the index at which the month name is stored in the array. Indexes in JavaScript arrays begin at 0; this suits our purpose and we do not need to increment the getMonth() value.

The code above prints: 14-March-2009

Format #4: Like 21st March 2001

In this format we include a superscript to the date value. The idea is to identify the date and then select a superscript based on the date value.

Code Select Expand

<script type="text/javascript">
<!--

var m_names = new Array("January", "February", "March",
"April", "May", "June", "July", "August", "September",
"October", "November", "December");

var d = new Date();
var curr_date = d.getDate();
var sup = "";
if (curr_date == 1 || curr_date == 21 || curr_date ==31)
   {
   sup = "st";
   }
else if (curr_date == 2 || curr_date == 22)
   {
   sup = "nd";
   }
else if (curr_date == 3 || curr_date == 23)
   {
   sup = "rd";
   }
else
   {
   sup = "th";
   }

var curr_month = d.getMonth();
var curr_year = d.getFullYear();

document.write(curr_date   "<SUP>"   sup   "</SUP> "
  m_names[curr_month]   " "   curr_year);

//-->
</script>

Note: The last line of code has been split up into two lines. For usage, the entire code should be written on a single line.

We first initialize a variable sup that would store the superscript value. Using If-Else-If, we check the value of the current date and accordingly assign a value to sup.

The code prints: 14th March 2009

[ganeshbala]

Getting current time using JavaScript

Format #5: day date month name year (something like, Wednesday 21st March 2001)

The getDay() method returns a number that specifies the day of the week. Sunday is represented by 0, Monday by 1 and so on. Here again we employ an array. This array would contain the Day names.

Code Select Expand

<script type="text/javascript">
<!--

var d_names = new Array("Sunday", "Monday", "Tuesday",
"Wednesday", "Thursday", "Friday", "Saturday");

var m_names = new Array("January", "February", "March",
"April", "May", "June", "July", "August", "September",
"October", "November", "December");

var d = new Date();
var curr_day = d.getDay();
var curr_date = d.getDate();
var sup = "";
if (curr_date == 1 || curr_date == 21 || curr_date ==31)
   {
   sup = "st";
   }
else if (curr_date == 2 || curr_date == 22)
   {
   sup = "nd";
   }
else if (curr_date == 3 || curr_date == 23)
   {
   sup = "rd";
   }
else
   {
   sup = "th";
   }
var curr_month = d.getMonth();
var curr_year = d.getFullYear();

document.write(d_names[curr_day]   " "   curr_date   "<SUP>"
  sup   "</SUP> "   m_names[curr_month]   " "   curr_year);

//-->
</script>

Note: For the sake of clarity, I've written the code for the arrays and the write() statement have been written on multiple lines. For usage, you would have to put this on a single line.

The Day name is accessed from the array using the value returned by getDay() as index.

The code above prints: :Saturday 14th March 2009

Format #6: Hours:Minutes (Finding the time)

Hours and minutes are obtained using getHours() and getMinutes() methods of the date object. The value returned by gethours() varies from 0 to 23.

Code Select Expand

<script type="text/javascript">
<!--

var d = new Date();

var curr_hour = d.getHours();
var curr_min = d.getMinutes();

document.write(curr_hour   " : "   curr_min);

//-->
</script>

Print: 21 : 25

There are two problem here. Firstly, if the hour or minutes is in single digits, JavaScript does not add any leading zeroes. Hence, 05:03 (AM) is printed as 5:3. Secondly, 12:00 AM becomes 0:00 (!). Let's see how to format time correctly.

[ganeshbala]

Formatting time using JavaScript

Format #7: Correct Time with AM and PM

<script type="text/javascript">
<!--

var a_p = "";
var d = new Date();

var curr_hour = d.getHours();

if (curr_hour < 12)
   {
   a_p = "AM";
   }
else
   {
   a_p = "PM";
   }
if (curr_hour == 0)
   {
   curr_hour = 12;
   }
if (curr_hour > 12)
   {
   curr_hour = curr_hour - 12;
   }

var curr_min = d.getMinutes();

document.write(curr_hour   " : "   curr_min   " "   a_p);

//-->
</script>

The code above is quite simple. First, a variable a_p is initialized. Depending upon the value of curr_hour, we assign AM or PM to this variable.
We then change the value of curr_hour. If the value is 0 (as in the case of 12:40 am), curr_hour shall hold the value of 12. Also, if curr_hour is more than 12 we subtract 12 from it to convert the hours to 12 hour format.

However, we still haven't solved the problem of single digit minutes. When the value returned from getMinutes() is a single digit, we want JavaScript to add a leading zero.

The code above prints: 9 : 26 PM

Format #8: Two digit minutes

To add a leading zero, we first have to check the value returned from getMinutes(). We then convert this numeric value to a string and check its length. If the length is 1, we add a leading zero.

Code Select Expand

<script type="text/javascript">
<!--

var a_p = "";
var d = new Date();
var curr_hour = d.getHours();
if (curr_hour < 12)
   {
   a_p = "AM";
   }
else
   {
   a_p = "PM";
   }
if (curr_hour == 0)
   {
   curr_hour = 12;
   }
if (curr_hour > 12)
   {
   curr_hour = curr_hour - 12;
   }

var curr_min = d.getMinutes();

curr_min = curr_min   "";

if (curr_min.length == 1)
   {
   curr_min = "0"   curr_min;
   }

document.write(curr_hour   " : "   curr_min   " "   a_p);

//-->
</script>

JavaScript is a loosely-type language. It means that the data type of a variable can be easily changed. Hence, the same variable storing a number can be made to store a string value.
Here we add a blank string to curr_min variable. This operation converts the data type of this variable from number to a string. Using the length property of the string object, we can then check the number of digits. If the number of digits are one, a leading zero is attached to the variable.

The code above prints: 9 : 26 PM

[ganeshbala]

Finding the number of seconds and milliseconds

Format #9: Finding the number of seconds and milliseconds

getSeconds() and getMIlliseconds() return the seconds and milliseconds values.

Code Select Expand

<script type="text/javascript">
<!--

var d = new Date();
var curr_hour = d.getHours();
var curr_min = d.getMinutes();

var curr_sec = d.getSeconds();
var curr_msec = d.getMilliseconds();

document.write(curr_hour   ":"   curr_min   ":"
  curr_sec   ":"   curr_msec);

//-->
</script>

Prints: 21:26:51:476

Format #10: GMT Time

Each of the methods discussed so far calculates time on the client-side (browser). JavaScript also supplies us, similar methods for finding the GMT (called the Universal Coordinated Time or UTC).

    * getUTCDate(): Date
    * getUTCMonth(): Month
    * getUTCFullYear(): Year (4 digit)
    * getUTCDay(): Day
    * getUTCHours(): Hours
    * getUTCMinutes(): Minutes
    * getUTCSeconds(): Seconds
    * getUTCMilliseconds(): Milliseconds

You can use these methods to find the GMT and format it based on scripts discussed before.





-------------------------------------
source : webdevelopersnotes