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 >
< 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 >
< 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 |
