How to get the current year using JavaScript ?

Print current day and time using HTML and JavaScript

Last Updated : 30 Sep, 2024

Printing the current day and time using HTML and JavaScript involves dynamically displaying the present date and time on a webpage. JavaScript's Date object is used to retrieve the current day, month, year, and time, which is then embedded in the HTML content.

Approach:

Retrieve Current Date and Day: Use the new Date() to get the current date and getDay() to retrieve the day's index (0 for Sunday).
An array of Weekdays: Map the day's index to a weekday array, which contains the names of the days, to display the correct day.
Get Time Components: Extract hours using getHours() and convert them to 12-hour format. Also, retrieve minutes using getMinutes().
AM/PM Determination: Determine whether it's AM or PM using a conditional check, adjusting the hour if necessary for the 12-hour format.
Display Time and Day: Use document.write() to display the current day and formatted time, including the hour, minutes, and milliseconds.

Example: In this example we are following the above-explained approach.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        print current day and time
    </title>
</head>

<body>
    <script type="text/javascript">
        let myDate = new Date();
        let myDay = myDate.getDay();

        // Array of days. 
        let weekday = ['Sunday', 'Monday', 'Tuesday',
            'Wednesday', 'Thursday', 'Friday', 'Saturday'
        ];
        document.write("Today is : " + weekday[myDay]);
        document.write("<br/>");

        // get hour value. 
        let hours = myDate.getHours();
        let ampm = hours >= 12 ? 'PM' : 'AM';
        hours = hours % 12;
        hours = hours ? hours : 12;
        let minutes = myDate.getMinutes();
        minutes = minutes < 10 ? '0' + minutes : minutes;
        let myTime = hours + " " + ampm + " : " + minutes +
            " : " + myDate.getMilliseconds();
        document.write("\tCurrent time is : " + myTime); 
    </script>
</body>

</html>

Output:

time-and-date — current day and time using HTML and JavaScript Example Output

How to get the current year using JavaScript ?

A

AnmolAgarwal

Improve

Article Tags :

Similar Reads

Birthday Reminder App using HTML, CSS, and JavaScript

Birthday reminder app helps us to track the upcoming birthdays of our loved ones so that we don't forget to celebrate them. In this tutorial, we will create a simple Birthday Reminder web app using the power of HTML, CSS, and JavaScript. This app allows users to add birthdays by adding names and bir

Print the content of a div element using JavaScript

If you want to print the content of a <div> element using JavaScript, you can achieve this by extracting the content and then opening a new window or popup to display and print it. This method involves capturing the content of the <div>, creating a new window, and using the print command

How to print the content of current window using JavaScript ?

The task is to print the content of the current window by using the window.print() method in the document. It is used to open the Print Dialog Box to print the current document. It does not have any parameter value. Syntax: window.print()Parameters: No parameters are requiredReturns: This function d

Create a Timeline using JavaScript

In this article, we will cover how to create a timeline using HTML CSS, and JavaScript.Â A Timeline is the visual representation of events along with the time they happened. On completion, the JavaSctript timeline will look like this: Prerequisites:The prerequisites knowledge required for this projec

How to get the current year using JavaScript ?

In this article, we will know how to get the current year using the build-in method in Javascript. The purpose is to get the current year by using JavaScript getFullYear() method that will return the full year in 4-digit format for some specified date. This method is used to fetch the year from a gi

Create an Analog Clock using HTML, CSS and JavaScript

Designing an analog clock is an excellent project to enhance your web development skills. This tutorial will guide you through creating a functional analog clock that displays the current time using HTML, CSS, and JavaScript.What Weâ€™re Going to CreateWe will develop a simple analog clock that shows

How to get the first and last date of current month using JavaScript ?

Given a month and the task is to determine the first and last day of that month in proper format using JavaScript. JavaScript getDate() Method: This method returns the day of the month (from 1 to 31) for the defined date. Syntax: Date.getDate() Parameters: This method does not accept any parameters.

How to get the day and month of a year using JavaScript ?

Given a date and the task is to get the day and month of a year using JavaScript. Approach: First get the current date by using new Date().Use getDay() method to get the current day in number format, Map it to the day name.Use getMonth() to get the current month in number format, Map it to the month

Age Calculator Design using HTML CSS and JavaScript

In the Age Calculator, the user enters their date of birth using a date input field. The tool calculates and displays the exact age in years, months, and days from the current date (or a specified date). We'll design the layout using HTML and CSS, and add functionality using JavaScript. It will also

Create Holiday Calendar using HTML and PHP

In this article, we will create a holiday calendar for a given month using the concept of tables in HTML, CSS for styling the calendar, and PHP. We will also display all the holidays in a given month, highlight them using a different color and display the holiday name whenever the mouse hovers over