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
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.
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
Try it yourself edit and preview live
Edit CodeHow 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.
// 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.
// 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.
// 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.
// Get the current day of the month
const day = current_date.getDate().toString().padStart(2, '0');
console.log("day:", day); // 14
Get Time
You can use the getHours()
, getMinutes()
, getSeconds()
, and getMilliseconds()
methods to retrieve the different parts of the time.
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:22
Working With A Particular Date
If you need to work with a specific date string, you can parse it in the following way.
// 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}`);