The date object is very useful for obtaining the date and time on the client. It supports various methods, which return a specific value.<\/p>\n
To start working with dates and time, we first initialize a variable and assign it a value with the new operator and the Date() constructor. The main function of the new operator with Date() constructor is to create a new date object that is stored in the variable. Here is the code:<\/p>\n
\r\nvar d = new Date();\r\n<\/pre>\nThus, variable d contains a new date object. We can now call the various methods of this date object.<\/p>\n
\r\nvar t_date = d.getDate()<\/strong>; \/\/ Returns the day of the month\r\nvar t_mon = d.getMonth()<\/strong>; \/\/ Returns the month as a digit\r\nvar t_year = d.getFullYear()<\/strong>; \/\/ Returns 4 digit year\r\nvar t_hour = d.getHours()<\/strong>; \/\/ Returns hours\r\nvar t_min = d.getMinutes()<\/strong>; \/\/ Returns minutes\r\nvar t_sec = d.getSeconds()<\/strong>; \/\/ Returns seconds\r\nvar t_mil = d.getMilliseconds()<\/strong>; \/\/ Returns Milliseconds\r\n<\/pre>\nNow we can easily display the date, month and year in an alert box, using the values stored in respective variables.<\/p>\n
\r\nalert(\"Today's date is \" + t_date + \"-\" + t_mon + \"-\" + t_year);\r\n<\/pre>\nClick here to display the alert box<\/a><\/p>\n
The eagle-eyed would have noticed that the month digit is one less than the present month. Hence, if you want to display the month, increment the value returned by getMonth() by 1. The corrected code should be:<\/p>\n
\r\nt_mon++;<\/strong>\r\nalert(\"Today's date is \" + t_date + \"-\" + t_mon + \"-\" + t_year);\r\n<\/pre>\nCheck the results<\/a><\/p>\n
Similarly, we can get the time using the variables that store hours, minutes, seconds and milliseconds values.<\/p>\n
\r\nalert(\"The time is \" + t_hour + \":\" + t_min + \":\" + t_sec);\r\n<\/pre>\nGet time in an alert box<\/a><\/p>\n
In the next session we’ll see how we can display a greeting based on the client time.<\/p>\n
\n\n
- < Back<\/a><\/li>\n
- 1<\/a><\/li>\n
- …<\/li>\n
- 10<\/a><\/li>\n
- …<\/li>\n
- 20<\/a><\/li>\n
- …<\/li>\n
- 23<\/a><\/li>\n
- …<\/li>\n
- 30<\/a><\/li>\n
- …<\/li>\n
- Next ><\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"The date object is very useful for obtaining the date and time on the client. It supports various methods, which return a specific value. To start working with dates and time, we first initialize a variable and assign it a value with the new operator and the Date() constructor. The main function of the new […]","protected":false},"author":1,"featured_media":15612,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[56],"tags":[],"class_list":["post-4447","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/posts\/4447","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/comments?post=4447"}],"version-history":[{"count":0,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/posts\/4447\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/media\/15612"}],"wp:attachment":[{"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/media?parent=4447"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/categories?post=4447"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/tags?post=4447"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}