[JS] Date + Time + Weekday Template
How to display the current date and time in real time using JavaScript
📅 Use Cases and Benefits of This Template
- Display date and current time together
- Include weekday name to improve clarity
- Learn how to update data in real time with setInterval
- Can be used in digital signage or information boards
📋 Copy & Paste Usable Code
<div id="datetime"></div>
<script>
setInterval(() => {
const now = new Date();
const y = now.getFullYear();
const m = (now.getMonth() + 1).toString().padStart(2, '0');
const d = now.getDate().toString().padStart(2, '0');
const h = now.getHours().toString().padStart(2, '0');
const min = now.getMinutes().toString().padStart(2, '0');
const s = now.getSeconds().toString().padStart(2, '0');
const dayNames = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
const w = dayNames[now.getDay()];
document.getElementById("datetime").textContent = `${y}/${m}/${d} ${h}:${min}:${s} (${w})`;
}, 1000);
</script>
🧩 Practical Use and Applications
This template uses setInterval(() => {...}, 1000) to update the current date and time every second in real-time. It retrieves year, month, day, and day of the week using methods like getFullYear() and getDay(). Since it includes the weekday along with the date and time, the displayed information is more comprehensive and easier to understand.
The weekday is determined using getDay() and mapped with the dayNames[] array, outputting the name in English. You can easily switch it to Japanese (e.g., ["日","月","火","水","木","金","土"]) if needed.
📌 Real-World Applications
This code can be used in various contexts such as school bulletin boards, event countdowns, or store business hours. By adjusting the CSS styles, it can also function as a stylish digital signage display.
Moreover, since it works based on the user's local time, it is well-suited for international websites or applications that require time zone-aware displays.