Quick Reach
The date object
You often need to work with the dates in your web projects for different purposes. Some date dependent work can be done at server side while other needs to be done at client side. For example, only retrieving today’s messages from the inbox. Getting report for given dates from the user, displaying a clock and so on.
JavaScript date object is the way to work with dates in your project. The js date has built in function to format dates. In this tutorial, we will explain how to create date object along with examples.
JavaScript date syntax
The date object can be created by using new Date keyword. Following is the general syntax of creating a date object:
var jsDate = new Date();
You may use optional parameters inside Date as well. The parameters include milliseconds, dateString etc. Using Date object without parameters will return current date and time with the timezone. See examples below, of using JS date object with date functions.
JavaScript current date example
Following is an example of using the date object. We simply created a date variable and assigned it Date object by using Javascript new Date keyword. As you click on the button, the current date and time will be shown in an alert. See example and code by clicking the link below:
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 date</button>
<script type=“text/javascript”>
function showalert(){
var jsDate = new Date();
alert(“The date is: “ + jsDate);
}
</script>
</body>
</html>
|
As you can see the current date is shown in an alert.
Javascript date functions
In the above example, we simply used date javascript object and displayed the current date. Let us look at a few useful date functions using the date object. These functions include getting only the day, month, year rather complete date and time. Following are examples of using these date functions.
getDay function example
The example shows day number of the Week (as an integer) by using javascript getDay function. Where 0 is for Sunday and 6 for Saturday. See example by clicking the link below:
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 JS getDay</button>
<script type=“text/javascript”>
function showalert(){
var jsDate = new Date();
alert(“The number of day in Week is: “ + jsDate.getDay());
}
</script>
</body>
</html>
|
As you can see, the number of the day in Week is shown as you click the button. Also note, the number of the day is based at the local system while using javascript getDay method.
You may wonder why it starts from 0 rather 1 for Sunday and same happens for Month number i.e. 0 for Jan, 11 for Dec as using the date object. The reason is, as date functions in javascript return numeric values and to get Month name (Jan, Feb…) or day name (Sat, Sun,…) you have to use arrays. As array index start from 0, this will reduce coding effort.
The getDate method example
The following example uses Javascript getDate method of the date object. The Javascript getDate returns date of the Month. See example by clicking the link:
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 date</button>
<script type=“text/javascript”>
function showalert(){
var jsDate = new Date();
alert(“The day of Mont is: “ + jsDate.getDate());
}
</script>
</body>
</html>
|
getFullYear example
The getFullYear method of date javascript returns full year for a given date. The returned value is four digit value (full year).
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 JS Year</button>
<script type=“text/javascript”>
function showalert(){
var jsDate = new Date();
alert(“The Year is: “ + jsDate.getFullYear());
}
</script>
</body>
</html>
|
getMonth example
The following example uses date JS’s getMonth method to return the number of the Month. The 0 represents January and 11 for December. The example will show the current month in your local system 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
|
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick=“showalert()”>Show JS Month</button>
<script type=“text/javascript”>
function showalert(){
var jsDate = new Date();
alert(“The Month number is: “ + jsDate.getMonth());
}
</script>
</body>
</html>
|
As you can see date method is showing current month number.
Javascript date formatting
Until now we learned how to use the date in javascript along with a few methods of the date object. One other aspect of working with the date is formatting dates. Due to its importance we have covered this in a separate chapter. Click here to go to date format chapter.
Also see Javascript array | date format
Leave A Comment?