Online Ethical Hacking Course

Apply Now

Examples

JavaScript Program to Display Date and Time

Displaying the current date and time is a common requirement in web applications, whether for logging purposes, real-time updates, or user interaction. JavaScript provides built-in methods to retrieve, format, and manipulate date and time values easily.

For example:

  • Showing the current date and time as 2024-01-20 15:30:45.

  • Formatting a date in a human-readable form like Saturday, January 20, 2024.

This guide explains how to display date and time in JavaScript, using different approaches for various use cases.

Date and Time Display in JavaScript Using Date Object to

The Date object in JavaScript provides various methods to get the current date and time.

Code

const currentDate = new Date();
console.log('Current Date and Time:', currentDate);

Output

Current Date and Time: Sat Jan 20 2024 15:30:45 GMT+0000 (Coordinated Universal Time)

Explanation

  • new Date() creates a date object with the current date and time.

  • The default output includes the date, time, and timezone.

Formatting Date and Time in JavaScrip

You can format the date and time using toLocaleString() for better readability.

Code

const currentDate = new Date();
console.log('Formatted Date and Time:', currentDate.toLocaleString());

Output

Formatted Date and Time: 1/20/2024, 3:30:45 PM

Explanation

toLocaleString() formats the date and time based on the user's locale settings.

JavaScript Program to Display Current Date and Time

A function to display the current date and time in a readable format.

Code

function displayCurrentDateTime() {
    const now = new Date();
    const formattedDate = now.toLocaleDateString();
    const formattedTime = now.toLocaleTimeString();
    console.log(`Current Date: ${formattedDate}, Current Time: ${formattedTime}`);
}

displayCurrentDateTime();

Output

Current Date: 1/20/2024, Current Time: 3:30:45 PM

Explanation

  • toLocaleDateString() extracts the date portion.

  • toLocaleTimeString() extracts the time portion.

Updating Date and Time Dynamically in JavaScript

You can update the date and time dynamically at set intervals using setInterval().

Code

function updateDateTime() {
    const now = new Date();
    document.getElementById('dateTime').innerText = now.toLocaleString();
}

setInterval(updateDateTime, 1000);

Output

Explanation

  • The function updates the content of an HTML element every second.

  • setInterval() ensures the function runs at the specified interval.

Custom Date and Time Formats in JavaScript

You can customize the output by manually extracting different parts of the date.

Code

function customFormattedDateTime() {
    const now = new Date();
    const day = now.getDate();
    const month = now.getMonth() + 1;
    const year = now.getFullYear();
    const hours = now.getHours();
    const minutes = now.getMinutes();
    const seconds = now.getSeconds();
    return `${day}-${month}-${year} ${hours}:${minutes}:${seconds}`;
}

console.log('Custom Formatted Date and Time:', customFormattedDateTime());

Output

Custom Formatted Date and Time: 20-1-2024 15:30:45

Explanation

  • Manually extract day, month, year, and time components.

  • Format the output according to custom requirements.

Concepts Used in Above Programs

Date Object

  • Provides built-in methods to get and manipulate date/time values.

Locale-Based Formatting

  • The toLocaleString() method formats date and time according to the user's locale.

Time Intervals

  • setInterval() can be used to update the date and time dynamically.

String Formatting

  • Template literals (${}) allow dynamic insertion of date and time values.