Skip to content
How to format date by jQuery date object with examples
In This Tutorial
jQuery date
In this tutorial, we will show you how to format date and use it in HTML document with jQuery. There are date plug-ins as well that you can include in your document and format as per requirement.
See jQuery date format example online
In the following example, we will create a jQuery date object and show you how to format and present it into an element.
Example of current date format in MM/DD/YYYY with jQuery
The example below creates a date object and then formats the date into MM/DD/YYYY. As you click on the button, the div element will be filled with current date by using jQuery append method.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
<script>
$(document).ready(function(){
var currdate = new Date();
var currdate= (currdate.getMonth()+ 1) + ‘/’ + currdate.getDate() + ‘/’ + currdate.getFullYear();
$(“button”).click(function(){
$(‘div’).append(currdate)
});
});
</script>
</head>
<body>
<p>Current date in MM/DD/YYYY format</p>
<div>The Current date is: </div>
<button type=“button”>Click to get current date</button>
</body>
</html>
|
Example of current time example with jQuery
The example below will show current time as you click on the button.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
<script>
$(document).ready(function(){
var currtime = new Date();
var currtime = (currtime.getHours() + “:”+ currtime.getMinutes() + “: “ + currtime.getSeconds());
$(“button”).click(function(){
$(‘div’).append(currtime)
});
});
</script>
</head>
<body>
<div>The Current time is: </div>
<button>Click to get current time</button>
</body>
</html>
|
You can see in the code, the date object is created and the current time is assigned to a variable by using the getHours, getMinutes, and getSeconds properties of the date object.
The plugins can be found here: https://github.com/phstc/jquery-dateFormat.
Useful reading: jQuery append
Leave A Comment?