Archive for January, 2012

How to Display Customized Date and Time in Javascript

Step 1: Create a Javascript Date instance.
When creating a date instance, its as simple as the code below: this will create the current user’s computer Date and Time.

var mydate = new Date ( ) ;

Step 2: Displaying the default date format.
The code above will assign date function to the variable mydate . Let us now see the mydate variable looks like if displayed.

< html >
< head >
< script type = "text/javacript" >

var mydate = new Date ( ) ;

document. getElementById ( "mydate_container" ) . innerHTML = mydate ;

</ script >
< head >
< body >
< div id = "mydate_container" ></ div >
</ body >
</ html >

The result would be:


Step 3: Customizing Date to display.
Now let us try to rearrange the date to whatever positioning we want.

< html >
< head >
< script type = "text/javacript" >

var mydate = new Date ( ) ;
var year = mydate. getFullYear ( ) ;
var month = mydate. getMonth ( ) ;
var day = mydate. getDay ( ) ;
var hours = mydate. getHours ( ) ;
var minutes mydate. getMinutes ( ) ;

var myFormattedDate = month + '/' + date + '/' + year + ' ' + hours + ':' + minutes ;

document. getElementById ( "mydate_container" ) . innerHTML = myFormattedDate ;

</ script >
< head >
< body >
< div id = "mydate_container" ></ div >
</ body >
</ html >

The result:


That’s it! really simple eh?

Here’s the list of the rest of the Javascript Date method.

Method

Description

getDate() Returns the day of the month (from 1-31)
getDay() Returns the day of the week (from 0-6)
getFullYear() Returns the year (four digits)
getHours() Returns the hour (from 0-23)
getMilliseconds() Returns the milliseconds (from 0-999)
getMinutes() Returns the minutes (from 0-59)
getMonth() Returns the month (from 0-11)
getSeconds() Returns the seconds (from 0-59)
getTime() Returns the number of milliseconds since midnight Jan 1, 1970
getTimezoneOffset() Returns the time difference between GMT and local time, in minutes
getUTCDate() Returns the day of the month, according to universal time (from 1-31)
getUTCDay() Returns the day of the week, according to universal time (from 0-6)
getUTCFullYear() Returns the year, according to universal time (four digits)
getUTCHours() Returns the hour, according to universal time (from 0-23)
getUTCMilliseconds() Returns the milliseconds, according to universal time (from 0-999)
getUTCMinutes() Returns the minutes, according to universal time (from 0-59)
getUTCMonth() Returns the month, according to universal time (from 0-11)
getUTCSeconds() Returns the seconds, according to universal time (from 0-59)
parse() Parses a date string and returns the number of milliseconds since midnight of January 1, 1970
setDate() Sets the day of the month (from 1-31)
setFullYear() Sets the year (four digits)
setHours() Sets the hour (from 0-23)
setMilliseconds() Sets the milliseconds (from 0-999)
setMinutes() Set the minutes (from 0-59)
s etMonth() Sets the month (from 0-11)
setSeconds() Sets the seconds (from 0-59)
setTimSe() Sets a date and time by adding or subtracting a specified number of milliseconds to/from midnight January 1, 1970
setUTCDate() Sets the day of the month, according to universal time (from 1-31)
setUTCFullYear() Sets the year, according to universal time (four digits)
setUTCHours() Sets the hour, according to universal time (from 0-23)
setUTCMilliseconds() Sets the milliseconds, according to universal time (from 0-999)
setUTCMinutes() Set the minutes, according to universal time (from 0-59)
setUTCMonth() Sets the month, according to universal time (from 0-11)
setUTCSeconds() Set the seconds, according to universal time (from 0-59)
setYear() Deprecated. Use the setFullYear() method instead
toDateString() Converts the date portion of a Date object into a readable string
toGMTString() Deprecated. Use the toUTCString() method instead
toLocaleDateString() Returns the date portion of a Date object as a string, using locale conventions
toLocaleTimeString() Returns the time portion of a Date object as a string, using locale conventions
toLocaleString() Converts a Date object to a string, using locale conventions
toString() Converts a Date object to a string
toTimeString() Converts the time portion of a Date object to a string
toUTCString() Converts a Date object to a string, according to universal time
UTC() Returns the number of milliseconds in a date string since midnight of January 1, 1970, according to universal time
valueOf() Returns the primitive value of a Date object

Be the first to comment - What do you think?
Posted by Mark Anthony Sabandal - January 19, 2012 at 11:23 am

Categories: Javascript Tags: , ,