JavaScript Date

JavaScript Date objects represent a single moment in a platform-independent format. Date objects contain an integral number representing milliseconds since midnight at the beginning of January 1, 1970, UTC. Date in JavaScript is basically defined as time in milliseconds. This timestamp is independent of time zone and uniquely defines a moment in history. The largest timestamp that a Date object can represent is slightly less than the maximum safe integer. A Date object can represent up to 8,640,000,000,000,000 milliseconds or one hundred million days. This is a range from April 20, 271821 BCE to September 13, 275760 CE. Any attempt to represent time outside this range results in a Date object with a timestamp value of NaN, which is an invalid date. JavaScript will by default use the browser's timezone and display the date as a full text string:

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Date</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>

<style>
    .date-display {
        padding: 20px;
        border-radius: 8px;
        margin: 20px 0;
    }

    .time-display {
        padding: 15px;
        border-radius: 6px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        margin: 15px 0;
    }

    .time-element {
        font-size: 1.5em;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .time-buttons {
        margin: 15px 0;
    }

    .demo-button {
        background: #3498db;
        color: white;
        border: none;
        padding: 8px 15px;
        border-radius: 4px;
        margin-right: 10px;
        cursor: pointer;
        transition: background 0.3s;
    }

    .demo-button:hover {
        background: #2980b9;
    }

    .date-info {
        margin-top: 20px;
        padding-top: 15px;
        border-top: 1px solid #eee;
    }
</style>
<body>
<div class="date-display">
    <h4>Basic Date Object Example:</h4>
    <div class="demo-result" id="basicDate"></div>

    <h4>Interactive Clock:</h4>
    <div class="time-display">
        <div id="time" class="time-element"></div>
        <div id="date" class="date-element"></div>
    </div>

    <div class="time-buttons">
        <button onmousedown="saveAndShowUTC()" onmouseup="restorePreviousValue()"
                onmouseleave="restorePreviousValue()" class="demo-button">Show UTC time</button>
        <button onclick="showLocal()" class="demo-button">Show local time</button>
        <button onmousedown="saveAndShowTimestamp()" onmouseup="restorePreviousValue()"
                onmouseleave="restorePreviousValue()" class="demo-button">Show timestamp</button>
    </div>

    <div class="date-info">
        <p><strong>Note:</strong> The Date object enables working with dates and time. The above example shows:</p>
        <ul>
            <li>Basic Date object</li>
            <li>Live clock updating every second</li>
            <li>Different display formats (UTC, local time, timestamp)</li>
        </ul>
    </div>
</div>

<script>
    // Initialize the basic date display
    document.getElementById("basicDate").innerHTML = "Current date: " + new Date().toLocaleString("en-US");

    // Global variables for interval management and state
    let intervalId = null;
    let isClockActive = true;

    // Function to update clock and date
    function updateClock() {
        const now = new Date();
        // Settings for date and time display format
        const options = {
            weekday: "long",
            year: "numeric",
            month: "long",
            day: "numeric",
            hour: "2-digit",
            minute: "2-digit",
            second: "2-digit",
            hour12: false
        };

        // Update clock display only if active
        if (isClockActive) {
            document.getElementById("time").innerHTML = now.toLocaleTimeString("en-US", {
                hour: "2-digit",
                minute: "2-digit",
                second: "2-digit",
                hour12: false
            });

            document.getElementById("date").innerHTML = now.toLocaleDateString("en-US", {
                weekday: "long",
                year: "numeric",
                month: "long",
                day: "numeric"
            });
        }
    }

    // Start interval clock update
    function startClock() {
        isClockActive = true;
        if (intervalId === null) {
            intervalId = setInterval(updateClock, 1000);
        }
        updateClock();
    }

    // Stop clock update
    function stopClock() {
        isClockActive = false;
        if (intervalId !== null) {
            clearInterval(intervalId);
            intervalId = null;
        }
    }

    // Function to display UTC time while button is held
    function saveAndShowUTC() {
        stopClock();
        const now = new Date();
        document.getElementById("time").innerHTML = now.toUTCString();
    }

    // Function to display timestamp while button is held
    function saveAndShowTimestamp() {
        stopClock();
        document.getElementById("time").innerHTML = "Timestamp: " + Date.now();
    }

    // Function to restore to normal clock display
    function restorePreviousValue() {
        startClock();
    }

    // Initial clock start
    startClock();
</script>
</body>
</html>

RESULT

Creating Objects

Objects Date are created with the constructor new Date(), which can be used in 9 different ways.

new Date()	Creates a date object with current date and time	See example
new Date(date)	Creates a date object from a date string	See example
new Date(year, month)	Creates a date object with specified year and month	See example
new Date(year, month, day)	Creates a date object with specified year, month and day	See example
new Date(year, month, day, hour)	Creates a date object with specified year, month, day and hour	See example
new Date(year, month, day, hour, minutes)	Creates a date object with specified year, month, day, hour and minutes	See example
new Date(year, month, day, hour, minutes, seconds)	Creates a date object with specified year, month, day, hour, minutes and seconds	See example
new Date(year, month, day, hour, minutes, seconds, milliseconds)	Creates a date object with specified year, month, day, hour, minutes, seconds and milliseconds	See example
new Date(milliseconds)	Creates a new date object as the sum of milliseconds and epoch time	See example

Date Methods and Properties

When a date object is created, several methods can be used to operate on it, allowing us to get and set the date and time using either local time or UTC (Universal or GMT) time. JavaScript will by default display dates using the toString() method. This is a representation of the date as a string, including the time zone. The format is defined in the ECMAScript specification (which is the specification of the scripting language that JavaScript is based on).

Basic Methods | Getting Time | UTC Methods | Setting Time | Conversions

Basic Methods
constructor	Returns the function that created the Date object prototype	See example
Getting Time
getDate()	Returns the day of the month (1-31)	See example
getDay()	Returns the day of the week (0-6)	See example
getFullYear()	Returns the year	See example
getHours()	Returns the hour (0-23)	See example
getMilliseconds()	Returns the milliseconds (0-999)	See example
getMinutes()	Returns the minutes (0-59)	See example
getMonth()	Returns the month (0 (January) to 11 (December))	See example
getSeconds()	Returns the seconds (0-59)	See example
getTime()	Returns the number of milliseconds since midnight January 1, 1970	See example
getTimezoneOffset()	Returns the time difference between UTC time and local time in minutes	See example
UTC Methods
getUTCDate()	Returns the day of the month according to universal time (1-31)	See example
getUTCDay()	Returns the day of the week according to universal time (0-6)	See example
getUTCFullYear()	Returns the year according to universal time	See example
getUTCHours()	Returns the hour according to universal time (0-23)	See example
getUTCMilliseconds()	Returns the milliseconds according to universal time (0-999)	See example
getUTCMinutes()	Returns the minutes according to universal time (0-59)	See example
getUTCMonth()	Returns the month according to universal time (0-11)	See example
getUTCSeconds()	Returns the seconds according to universal time (0-59)	See example
Basic Methods
now()	Returns the number of milliseconds since midnight January 1, 1970	See example
parse()	Parses a date string and returns the number of milliseconds since January 1, 1970	See example
prototype	Allows you to add properties and methods to an object	See example
Setting Time
setDate()	Sets the day of the month of a date object	See example
setFullYear()	Sets the year of a date object	See example
setHours()	Sets the hour of a date object	See example
setMilliseconds()	Sets the milliseconds of a date object	See example
setMinutes()	Sets the minutes of a date object	See example
setMonth()	Sets the month of a date object	See example
setSeconds()	Sets the seconds of a date object	See example
setTime()	Sets the date to a specified number of milliseconds after/before January 1, 1970	See example
setUTCDate()	Sets the day of the month of a date object according to universal time	See example
setUTCFullYear()	Sets the year of a date object according to universal time	See example
setUTCHours()	Sets the hour of a date object according to universal time	See example
setUTCMilliseconds()	Sets the milliseconds of a date object according to universal time	See example
setUTCMinutes()	Sets the minutes of a date object according to universal time	See example
setUTCMonth()	Sets the month of a date object according to universal time	See example
setUTCSeconds()	Sets the seconds of a date object according to universal time	See example
Conversions
toDateString()	Converts the date portion of a Date object into a readable string	See example
toISOString()	Returns the date as a string using the ISO standard	See example
toJSON()	Returns the date as a string, formatted as a JSON date	See example
toLocaleDateString()	Returns the date portion of a Date object as a string, using locale conventions	See example
toLocaleTimeString()	Returns the time portion of a Date object as a string, using locale conventions	See example
toLocaleString()	Converts a Date object to a string, using locale conventions	See example
toString()	Converts a Date object to a string	See example
toTimeString()	Converts the time portion of a Date object to a string	See example
toUTCString()	Converts a Date object to a string according to universal time	See example
Basic Methods
UTC()	Returns the number of milliseconds in a date since midnight of January 1, 1970, according to UTC time	See example
Conversions
valueOf()	Returns the primitive value of a Date object	See example