Using JavaScript to display the current time in real-time on a webpage is one of the basics in the world of web development. This technology not only enriches the user interface but also adds dynamic elements to web applications. In this article, we will introduce how to extend the Date object using exdate.js and how to display the date and time in a specified format. This article is structured to be easy to understand for both engineers and beginners in programming.
Basics of Displaying Date and Time in JavaScript
Let’s first look at the basic method for displaying the current date and time on a webpage. The JavaScript Date object is a powerful tool for handling date and time information. However, customizing the display format can be challenging, which is where exdate.js comes in, enabling more flexible date and time displays.
Extending the Date Object with exdate.js
exdate.js is a library developed as a jQuery plugin that extends the Date object, allowing you to easily display dates in a specified format. The beauty of this library lies in its ability to handle complex date formats with ease.
Style and Structure
To arrange the appearance of the date and time displayed on the webpage, we use CSS for styling. The following code defines the basic style for the area (#now) where the date and time will be displayed.
<style>
body{
font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
padding: 0;
margin: 0;
}
h1{
font-size:18px;
line-height:1.6em;
text-align:center;
font-weight:normal;
padding:10px 0;
}
.clWrap{
width:700px;
margin:0 auto;
text-align:left;
}
#now{
margin:0 auto;
color:#F00;
text-align:center;
font-size:20px;
}
</style>
This style definition ensures that the #now area, which displays the date and time, is centered and displayed in red.
Dynamic Display Using JavaScript
We implement a process that continuously updates the current date and time in real-time using exdate.js and jQuery. First, we load the necessary libraries, jquery.min.js and exdate.js. Next, we use the following JavaScript code to update the current time every second and display it in the specified format.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="exdate.js"></script>
<script type="text/javascript">
$(function(){
setInterval(function(){
$('#now').html($.exDate().toChar(
'Currently it is yyyy-mm-dd hh24:mi:ss.'
))
},1000)
});
</script>
This code ensures that the current date and time are formatted and displayed in the #now area every second after the page is loaded.
HTML Structure
The HTML structure for the area (id=”now”) where the formatted date and time will be output.
<div class="clWrap">
<h1>The current date and time (year, month, day, hour, minute, second) will be updated every second.</h1>
<div id="now"></div>
</div><!--/clWrap-->
Demo Page Showing Date Format Using exdate.js
By combining the code presented, you can see a clearer picture of how to implement the date and time display using exdate.js. The demo page below shows how the date and time are updated in real-time and displayed in the specified format.
Demo of Date Formatting Using exdate.js
Source: jQuery.exDate.js Extending the Date Object
Source: jQuery.exDate.js Extending the Date Object
Conclusion
We have introduced how to extend the Date object using exdate.js and how to display dates in a specified format. By using this method, you can dynamically and attractively display the date and time on your webpage. We hope that this article will help beginners deepen their understanding of JavaScript’s Date object.
Although this is the end of the explanation, the possibilities of exdate.js are still vast. Be sure to try it in your projects and experience its convenience.
*Please use this at your own risk.
Do not reuse the Google Analytics tags in the demo page’s head tag.
