JS Date & Function

The Date object lets you work with dates (years, months,days, minutes, seconds, milliseconds)

Displaying Dates

In this tutorial we use a script to display dates inside a <p> element with id="demo":


Example

<p id="demo"></p><script>document.getElementById("demo").innerHTML = Date();
</script>

The script above says: assign the value of Date() to the content (innerHTML) of the element with id="demo". 

You will learn how to display a date, in a more readable format, at the bottom of this page.

 


Creating Date Objects

The Date object lets us work with dates.

A date consists of a year, a month, a week, a day, a minute, a second, and a millisecond.

Date objects are created with the new Date() constructor.

There are 4 ways of initiating a date:

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

Using new Date(), without parameters, creates a new date object with the current
date and time
:

Example

<script>
var d = new Date();
document.getElementById("demo").innerHTML = d;</script>

Using new Date(), with a date string, creates a new date object with the specified date and time:

Example

<script>
var d = new Date("October 13, 2014 11:13:00");document.getElementById("demo").innerHTML =d;</script>

Using new Date(), with a number, creates a new date object with
number of millisecond since 1970/01/01:

Example

<script>
var d = new Date(0);
document.getElementById("demo").innerHTML = d;</script>
JavaScript dates are calculated in milliseconds from 01 January, 1970
00:00:00 Universal Time (UTC).
One day contains 86,400,000 millisecond.

Using new Date(), with 6 numbers, creates a new date object with the specified date and time:

The 6 numbers specify the year, month, day, hour, minute, second, and millisecond, in that order:

Example

<script>
var d = new Date(99,5,24,11,33,0);
document.getElementById("demo").innerHTML = d;</script>

Variants of the example above let us omit any of the last 4 parameters:

Example

<script>
var d = new Date(99,5,24);
document.getElementById("demo").innerHTML = d;</script>

Date Methods

When a Date object is created, a number of methods allow you to operate on it.

Date methods allow you to get and set the year, month, day, hour, minute, second, and millisecond of objects, using either local time or UTC (universal, or GMT) time.

The next chapter, of this tutorial, covers the date object’s methods.


Displaying Dates

When you display a date object in HTML, it is automatically converted to a string, with the toString() method.

Example

<p id="demo"></p><script>d = new Date();document.getElementById("demo").innerHTML = d;
</script>

Is the same as:

<p id="demo"></p><script>d = new Date();document.getElementById("demo").innerHTML = d.toString();
</script>

The toUTCString() method converts a date to a UTC string (a date display standard).

Example

<script>
var d = new Date();document.getElementById("demo").innerHTML = d.toUTCString;
</script>

The toDateString() method converts a date to a more readable format:

Example

<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.toDateString;</script>
Date objects are static, not dynamic. The computer time is ticking, but date objects, once created, are not.

Date methods let you get and set date values (years,months, days, minutes, seconds, milliseconds)


Date Get Methods

Get methods are used for getting a part of a date. Here are the most common(alphabetically):

Method Description
getDate() Get the day as a number (1-31)
getDay() Get the weekday a number (0-6)
getFullYear() Get the four digit year (yyyy)
getHours() Get the hour (0-23)
getMilliseconds() Get the milliseconds (0-999)
getMinutes() Get the minutes (0-59)
getMonth() Get the month (0-11)
getSeconds() Get the seconds (0-59)
getTime() Get the time (milliseconds since January 1, 1970)


The getTime() Method

getTime() returns the the number of milliseconds since 01.01.1970:

Example

<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.getTime();
</script>

The getFullYear() Method

getFullYear() returns the year of a date as a four digit number:

Example

<script>var d = new Date();
document.getElementById("demo").innerHTML = d.getFullYear();
</script>

The getDay() Method

getDay() returns the weekday as a number (0-6):

Example

<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.getDay();
</script>

You can use an array of names, and getDay() to return the weekday as a name:

Example

<script>
var d = new Date();
var days =["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
document.getElementById("demo").innerHTML = days[d.getDay()];
</script>

Date Set Methods

Set methods are used for setting a part of a date. Here are the most common(alphabitically):

Method Description
setDate() Set the day as a number (1-31)
setFullYear() Set the year (optionally month and day yyyy.mm.dd)
setHours() Set the hour (0-23)
setMilliseconds() Set the milliseconds (0-999)
setMinutes() Set the minutes (0-59)
setMonth() Set the month (0-11)
setSeconds() Set the seconds (0-59)
setTime() Set the time (milliseconds since January 1, 1970)

The setFullYear() Method

setFulYear() sets a date object to a specific date. In this example, to January 14, 2020:

Example

<script>
var d = new Date();
d.setFullYear(2020, 0, 14);
document.getElementById("demo").innerHTML =d;</script>

The setDate() Method

setDate() sets the day of the month (1-31):

Example

<script>
var d = new Date();
d.setDate(20);
document.getElementById("demo").innerHTML=d;
</script>

The setDate() method can also be used to add days to a date:

Example

<script>
var d = new Date();
d.setDate(d.getDate + 50);
document.getElementById("demo").innerHTML=d;</script>
Note If adding days, shifts the month or year, the changes are handled automatically by the Date object.

Date  Input – Parsing Dates

If you have an input value (or any string), you can use the Date.parse() method to convert it to milliseconds.

Date.parse() returns the number of milliseconds between the date and January 1, 1970:

Example

<script>
var msec = Date.parse("March 21, 2012");
document.getElementById("demo").innerHTML = msec;</script>

You can then use the number of milliseconds to convert it to a date object:

Example

<script>
var msec = Date.parse("March 21, 2012");
var d = new Date(msec);
document.getElementById("demo").innerHTML = d;</script>

Compare Dates

Dates can easily be compared.

The following example compares today’s date with January 14, 2100:

Example

var today, someday, text;
today = new Date();
someday = new Date();
someday.setFullYear(2100, 0, 14);
if (someday > today) {    text
= "Today is before January 14, 2100.";}else {>    text = "Today is after January 14, 2100.";}document.getElementById("demo").innerHTML= text;

Admin has written 171 articles