Live Date and Time with Milliseconds (AM/PM)

This page shows how to use JavaScript to display the current date and time in milliseconds in AM/PM format. The time is updated every millisecond to ensure accuracy, making it an ideal tool for applications that require real-time accuracy.

Demo Live Date and Time with Milliseconds

2024-06-29 12:33:58.044 AM

JavaScript Function To Display The Current Time With Milliseconds

If you want to show the current date and time in milliseconds using JavaScript, This code will display the current time with milliseconds, updated every 10 milliseconds, in a 12-hour format with AM/PM.

JavaScript

const liveTimeWithMillisecond = () => {
    const now = new Date();
    const year = now.getFullYear();
    const month = (now.getMonth() + 1).toString().padStart(2, '0');
    const day = now.getDate().toString().padStart(2, '0');
    let hours = now.getHours();
    const minutes = now.getMinutes().toString().padStart(2, '0');
    const seconds = now.getSeconds().toString().padStart(2, '0');
    const milliseconds = now.getMilliseconds().toString().padStart(3, '0');

    // 12-hour clock with AM/PM.
    const ampm = hours >= 12 ? 'PM' : 'AM';
    hours = hours % 12;
    hours = hours ? hours : 12; // The hour '0' should be '12'
    const formatted_hours = hours.toString().padStart(2, '0');
    const formatted_time = `${year}-${month}-${day} ${formatted_hours}:${minutes}:${seconds}.${milliseconds} ${ampm}`;

    // for 24 hours
    // const formatted_time = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}.${milliseconds}`;

    document.getElementById('clock').textContent = formatted_time;
};
// update time every 10 millisecond
setInterval(liveTimeWithMillisecond, 10);

Usage

HTML

 <div id="clock"></div>

Try it yourself edit and preview live

Edit Code

How to Extract Time, Day, Month, and Year from a Date Using JavaScript

You can retrieve the time, day, month, and year from a date in JavaScript by utilizing the new Date() object along with its different methods. Here is a simple way to achieve this.

Create a Date Object

First, create a Date object. This can be done using the current date and time, or by passing a specific date string.

JavaScript

// Create a new Date object to get the current date and time
const current_date = new Date();

You can then use the following methods to extract the year, month, day, and time

Get Current Year

Use the getFullYear() method to get the four-digit year.

JavaScript

// Get the current year
const year = current_date.getFullYear();
console.log("Current year:", year); // 2024

Get Current Month

You can use the getMonth() method to get the month. Remember that it starts counting from zero (0 in January, 1 in February, etc.), so you need to add 1 to get the correct month number.

JavaScript

// Get the current month (returns a number from 0 to 11)
// Adding 1 to convert it to a more conventional month number (1 to 12)
const month = (current_date.getMonth() + 1).toString().padStart(2, '0');
console.log("Current month:", month); // 12

// Array of month names
const month_names = [
  "January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
];

// Get the current month name
let month_name = month_names[current_date.getMonth()];
console.log("Current month name:", month_name); // December

Get Current day

Use the getDate() method to get the day of the month.

JavaScript

// Get the current day of the month
const day = current_date.getDate().toString().padStart(2, '0');
console.log("day:", day); // 21

Get Time

You can use the getHours(), getMinutes(), getSeconds(), and getMilliseconds() methods to retrieve the different parts of the time.

JavaScript

const hours = current_date.getHours();
const minutes = current_date.getMinutes().toString().padStart(2, '0');
const seconds = current_date.getSeconds().toString().padStart(2, '0');
const milliseconds = current_date.getMilliseconds().toString().padStart(3, '0');

console.log(`${hours}:${minutes}:${seconds}:${milliseconds}`); // 18:31:03

Working With A Particular Date

If you need to work with a specific date string, you can parse it in the following way.

JavaScript

// Create a Date object for a date
let specific_date = new Date("2023-06-29T10:30:00");

// Extract the components as before
let year = specific_date.getFullYear();
let month = specific_date.getMonth() + 1;
let day = specific_date.getDate();
let hours = specific_date.getHours();
let minutes = specific_date.getMinutes();
let seconds = specific_date.getSeconds();
let milliseconds = specific_date.getMilliseconds();

// Display the results
console.log(`Year: ${year}`);
console.log(`Month: ${month}`);
console.log(`Day: ${day}`);
console.log(`Time: ${hours}:${minutes}:${seconds}:${milliseconds}`);

Report Problem