Quick Reach
The date formatting in JavaScript
In previous chapter, JavaScript date object, we explained how to work with the date objects in JavaScript. In your web projects, you generally need to format date according to the requirements. For example showing date in ”
For example, showing date in “dd/mm/yyyy” or “mm/dd/yyyy” or localized format, showing day name of the Week with the Month name and year etc.
This chapter will show you examples of how you can use date object to format date. Generally, date methods provided by JavaScript returns integer numbers as shown in the examples below.
JavaScript getDay and getMonth methods example
The following example returns day number of the Week and Month number by using getDay and getMonth methods.
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
|
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick=“showalert()”>Show day number in Week and Month!</button>
<script type=“text/javascript”>
function showalert(){
var jsDate = new Date();
alert(“The number of day in Week is: “ + jsDate.getDay() + “nThe number of Month is: “ + jsDate.getMonth());
}
</script>
</body>
</html>
|
As you can see, the day and month number are shown in an alert by using the date methods. The getDay returns day number of the Week starting from 0 for Sunday and 6 for Saturday. Whereas getMonth returns month number, 0 for Jan and 11 for Dec.
You may wonder why it starts from 0 rather 1 for Sunday and same happens for Month number. The reason is, as date functions in JavaScript return numeric values you may have to use arrays to format the date. As array index starts from 0, this will reduce coding effort.
The date formatting can be done by using external libraries like date js. The sugar.js also has extensions to the date object. In this tutorial, we will show format date by using arrays in our examples.
The date format in dd-Month–YYYY example
Following is an example of JavaScript format date. It will show local date in the “dd-Month-YYYY” format by using date object. Click the link below to see the example online:
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
|
<!DOCTYPE html>
<html>
<body>
<button onclick=“showdate()”>Show format date</button>
<script type=“text/javascript”>
function showdate(){
var JSdate = new Date();
var Month_name = new Array(“Jan”, “Feb”, “Mar”,“Apr”, “May”, “Jun”, “Jul”, “Aug”, “Sep”,“Oct”, “Nov”, “Dec”);
var current_date = JSdate.getDate();
var current_month = JSdate.getMonth();
var current_year = JSdate.getFullYear();
alert (current_date + “-“ + Month_name[current_month]+ “-“ + current_year);
}
</script>
</body>
</html>
|
In the demo, the month names are stored in a Month_name array. Then we used a variable, current_month, to get current month’s integer value that acted as an index for array while showing short Month name in date format example.
The formatted date with Weekday name format
The following example shows Weekday name along with day, month and year. The date formatting will be as follows:
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
|
<!DOCTYPE html>
<html>
<body>
<button onclick=“showdate()”>Show javascript format date</button>
<script type=“text/javascript”>
function showdate(){
var JSdate = new Date();
var Month_name = new Array(“January”, “February”, “March”,“April”, “May”, “June”, “July”, “August”, “September”,
“October”, “November”, “December”);
var weekday_name = new Array (“Sun”, “Mon” ,“Tue” ,“Wed” ,“Thu” ,“Fri” ,“Sat”);
var current_date = JSdate.getDate();
var current_day = JSdate.getDay();
var current_month = JSdate.getMonth();
var current_year = JSdate.getFullYear();
alert (weekday_name[current_day] + ” , “ + current_date + ” “ + Month_name[current_month]+ ” “ + current_year);
}
</script>
</body>
</html>
|
As you can see the date is shown in e.g. “Fri, 1 June 2012″ format.
Similarly, you can format date according to local format like mm/dd/yyyy by using concatenating characters.
JavaScript date format in dd/mm/yyyy and mm/dd/yyyy example
Following is an example of JS date format in the “dd/mm/yyyy” and “mm/dd/yyyy” format. Two buttons are shown, one for each format. As you click on the button, the local date in specified format will be shown in an alert.
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
38
39
40
41
42
43
44
45
|
<!DOCTYPE html>
<html>
<body>
<button onclick=“showdate1()”>date format in dd/mm/yyyy</button>
<button onclick=“showdate2()”>date format in mm/dd/yyyy</button>
<script type=“text/javascript”>
function showdate1(){
var JSdate = new Date();
var current_date = JSdate.getDate();
var current_month = JSdate.getMonth() + 1;
var current_year = JSdate.getFullYear();
alert (current_date + “/” + current_month + “/” + current_year);
}
function showdate2(){
var JSdate = new Date();
var current_date = JSdate.getDate();
var current_month = JSdate.getMonth() + 1;
var current_year = JSdate.getFullYear();
alert (current_month + “/” + current_date + “/” + current_year);
}
</script>
</body>
</html>
|
You can see the formatted date is shown in the alerts.
As mentioned earlier you can also include external date libraries as well to work with date formatting.
Leave A Comment?