JavaScript Date Objects
JavaScript Date Objects let us work with dates:
Note :
Date objects are static. The clock is not running.
The computer's clock is counting time, but date objects aren't.
JavaScript Date Output
JavaScript typically uses the time zone of the user's web browser and shows a date as a complete text description.
Today is Monday, October 30, 2023, and it's currently 2:37 PM in Pakistan. This message is written in bold.
Creating Date Objects
You can create Date objects using the new Date() constructor.
There are 9 ways to create a new date object:
new Date()
new Date(date string)
new Date(year,month)
new Date(year,month,day)
new Date(year,month,day,hours)
new Date(year,month,day,hours,minutes)
new Date(year,month,day,hours,minutes,seconds)
new Date(year,month,day,hours,minutes,seconds,ms)
new Date(milliseconds)
JavaScript new Date()
The code new Date() makes a new date and time object that represents the current date and time.
new Date(date string)
The code new Date(date string) makes a date object from a date string.
new Date(year, month, ...)
The HTML code new Date(year, month, ...) generates a date object with a specific date and time.
Seven numbers are used to indicate the year, month, day, hour, minute, second, and millisecond in that exact order.
Note :
JavaScript counts months from 0 to 11:
January = 0.
December = 11.
Setting a month value greater than 11 won't cause an error, but it will roll over to the following year.
If you choose a day greater than the maximum allowed, it won't cause an error. Instead, the extra days will be counted in the following month.
Using 6, 4, 3, or 2 Numbers
Use six numbers to indicate the year, month, day, hour, minute, and second.
5 numbers specify year, month, day, hour, and minute:
4 numbers specify year, month, day, and hour:
3 numbers tell us the year, month, and day.
2 numbers indicate the year and month:
You cannot omit month. If you provide just one parameter, it will be considered as milliseconds.
Previous Century
Years with one or two digits will be understood as in the 1900s.
JavaScript Stores Dates as Milliseconds
JavaScript counts dates as the number of milliseconds from January 01, 1970.
The starting point is January 01, 1970 00:00:00 UTC.
One full day, which is 24 hours, equals 86,400,000 milliseconds.
Now the time is: 1698658668650 milliseconds past January 01, 1970
new Date(milliseconds)
The code new Date(milliseconds) generates a fresh date object based on the provided number of milliseconds, adding no additional time.
Date Methods
When you create a date object, several functions are available for you to work with it.
Date methods let you access and change different parts of a date, like the year, month, day, hour, minute, second, and even milliseconds. You can do this using either the time based on your local time zone or the universal time (UTC/GMT).
Displaying Dates
JavaScript will display dates using the toString() method as a default. This shows the date as a text, along with the time zone information. The specific format is defined in the ECMAScript specification.
When you show a date in HTML, it turns into text using the toString() method.
The toDateString() function changes a date to a simpler, easier-to-read format.
The toUTCString() function changes a date into a string, following the UTC standard.
The toISOString() function changes a date into a text using the ISO format.
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>Using new Date()</h2>
<p>Create a fresh date object with the present date and time:</p>
<p id="demo"></p>
<script>
const d = new Date();
document.getElementById("demo").innerHTML = d;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>Using new Date()</h2>
<p>You can make a date object by choosing a specific date and time.</p>
<p id="demo"></p>
<script>
const d = new Date("October 13, 2014 11:13:00");
document.getElementById("demo").innerHTML = d;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript new Date()</h2>
<p>Using the new Date() function with seven numbers, you can make a fresh date object with the exact date and time you want.</p>
<p id="demo"></p>
<script>
const d = new Date(2018, 11, 24, 10, 33, 30, 0);
document.getElementById("demo").innerHTML = d;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript new Date()</h1>
<p>JavaScript counts months from 0 to 11.</p>
<p>If you choose a month number greater than 11, it won't cause an error. Instead, it will extend into the following year.</p>
<p id="demo"></p>
<script>
const d = new Date(2018, 15, 24, 10, 33, 30, 0);
document.getElementById("demo").innerHTML = d;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript new Date()</h2>
<p>JavaScript counts months from 0 to 11.</p>
<p>If you choose a day that's beyond the maximum for the month, it won't cause an error. Instead, it will just move to the next month and continue from there.</p>
<p id="demo"></p>
<script>
const d = new Date(2018, 05, 35, 10, 33, 30, 0);
document.getElementById("demo").innerHTML = d;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript new Date()</h2>
<p>6 numbers show the year, month, day, hour, minute, and second.</p>
<p id="demo"></p>
<script>
const d = new Date(2018, 11, 24, 10, 33, 30);
document.getElementById("demo").innerHTML = d;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript new Date()</h2>
<p>5 numbers specify year, month, day, hour, and minute:</p>
<p id="demo"></p>
<script>
const d = new Date(2018, 11, 24, 10, 33);
document.getElementById("demo").innerHTML = d;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript new Date()</h2>
<p>4 numbers specify year, month, day, and hour:</p>
<p id="demo"></p>
<script>
const d = new Date(2018, 11, 24, 10);
document.getElementById("demo").innerHTML = d;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript new Date()</h2>
<p>3 numbers specify year, month, and day:</p>
<p id="demo"></p>
<script>
const d = new Date(2018, 11, 24);
document.getElementById("demo").innerHTML = d;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript new Date()</h2>
<p>2 numbers specify year and month:</p>
<p id="demo"></p>
<script>
const d = new Date(2018, 11);
document.getElementById("demo").innerHTML = d;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript new Date()</h2>
<p>One value will be seen as a new Date represented in milliseconds.</p>
<p id="demo"></p>
<script>
const d = new Date(2018);
document.getElementById("demo").innerHTML = d;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript new Date()</h2>
<p>Two digit years will be interpreted as 19xx:</p>
<p id="demo"></p>
<script>
const d = new Date(99, 11, 24);
document.getElementById("demo").innerHTML = d;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript new Date()</h2>
<p>One digit years will be interpreted as 19xx:</p>
<p id="demo"></p>
<script>
const d = new Date(9, 11, 24);
document.getElementById("demo").innerHTML = d;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript new Date()</h2>
<p>One digit years will be interpreted as 19xx:</p>
<p id="demo"></p>
<script>
const d = new Date(9, 11, 24);
document.getElementById("demo").innerHTML = d;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>Using new Date()</h2>
<p>When you use `new Date()` without putting anything inside the parentheses, it makes a date and time object that shows the current date and time.</p>
<p id="demo"></p>
<script>
const d = new Date();
document.getElementById("demo").innerHTML = d;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>The toString() Method</h2>
<p>Convert a date to a string:</p>
<p id="demo"></p>
<script>
const d = new Date();
document.getElementById("demo").innerHTML = d.toString();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>The toDateString() Method</h2>
<p>Convert a date to a date string:</p>
<p id="demo"></p>
<script>
const d = new Date();
document.getElementById("demo").innerHTML = d.toDateString();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>The toUTCString() Method</h2>
<p>Convert a date to a string using the UTC standard:</p>
<p id="demo"></p>
<script>
const d = new Date();
document.getElementById("demo").innerHTML = d.toUTCString();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>The toISOString() Method</h2>
<p>Convert a date to a string using the ISO standard:</p>
<p id="demo"></p>
<script>
const d = new Date();
document.getElementById("demo").innerHTML = d.toISOString();
</script>
</body>
</html>
HTML
CSS
Javascript
Jquery