{"id":333,"date":"2011-12-18T16:27:49","date_gmt":"2011-12-18T16:27:49","guid":{"rendered":"http:\/\/javascript-tutor.net\/index.php\/"},"modified":"2017-11-18T05:42:22","modified_gmt":"2017-11-18T05:42:22","slug":"lesson-9-objects-part-1-date-object","status":"publish","type":"page","link":"https:\/\/javascript-tutor.net\/index.php\/lesson-9-objects-part-1-date-object\/","title":{"rendered":"JavaScript Lesson 9: The Date Object"},"content":{"rendered":"<h4 align=\"center\"><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-8-looping\/\">&lt;Lesson 8&gt;<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/tutorial\/\">[Contents]<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-10-objects-part-2-math-object\/\">&lt;Lesson 10&gt;<\/a><\/h4>\n<p>JavaScript is an object-oriented programming language. JavaScript programming consists of commands that manipulate various kinds of objects using\u00a0<strong>properties<\/strong> and\u00a0<strong>methods<\/strong>. There are many built-in objects in JavaScript, among the most commonly used are Document object, Date object, Text object, Form object, String object, Password object, Location object, \u00a0Math object and more. Each object has its own Properties and Methods. In this lesson, we will examine the date object, the rest of the objects will be discussed in the coming lessons.<\/p>\n<h3><strong>9.1 The Date Object<\/strong><\/h3>\n<p>The date object is used to manipulate and display date and time. The Methods associated with the date object are getDate, getDay, getHours, getMinutes, getSeconds, getYear and more. Each of these methods returns the current time value associated with the method name. For example, getDate will return the current while get minutes will return the current minutes<\/p>\n<p>In order to use the Date object, we need to create an instant of the object using the\u00a0<strong>New<\/strong> keyword.<\/p>\n<p><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block; text-align: center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-3033628290023372\" data-ad-slot=\"5669011038\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><br \/>\n<strong>9.2\u00a0Displaying Date and Time<\/strong><\/p>\n<h4><strong>Example 9.1<\/strong><\/h4>\n<pre style=\"font-size: 110%;\">&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;title&gt;Date Object&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;h1&gt;Date and Time Manipulation&lt;\/h1&gt;\r\n&lt;script language=javascript&gt;\r\n\r\ncurrentDate=new Date()\r\ndocument.write(\"&lt;font color=red&gt;Displaying Day of the month:&lt;\/font&gt;\"+currentDate.getDate())\r\ndocument.write(\"&lt;br&gt;&lt;font color=red&gt;Displaying hours of the current time:&lt;\/font&gt;\"+currentDate.getHours())\r\ndocument.write(\"&lt;br&gt;&lt;font color=red&gt;Displaying minutes of the current time:&lt;\/font&gt;\"+currentDate.getMinutes())\r\ndocument.write(\"&lt;br&gt;&lt;font color=red&gt;Your computer time is: &lt;\/font&gt;\"+currentDate.toString())\r\ndocument.write(\"&lt;br&gt;&lt;font color=red&gt;Your Local time is: &lt;\/font&gt;\"+currentDate.toLocaleString())\r\n\r\n&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n\r\n<\/pre>\n<p>Click on the\u00a0<a href=\"http:\/\/javascript-tutor.net\/java_tutor\/Javascrpt_Example9.1.htm\">Example 9.1<\/a> to see the output<\/p>\n<h3><strong>9.3 : Setting Date and Time<\/strong><\/h3>\n<p>We can set the date and time in JavaScript using\u00a0 setDate, setHours, setMinutes, setMonth, setTime\u00a0 and setYear methods. The general formats are:<\/p>\n<pre style=\"font-size: 110%;\">Mydate.setDate(day of the month)Mydate.setHours(hours of the day)\r\n\r\nMydate.setMinutes(Minutes of the day)\r\n\r\nMydate.setMonth(Month of the day)\r\n\r\nMydate.setYear(Year)\r\n\r\n<\/pre>\n<p>&nbsp;<\/p>\n<h4><strong>Example 9.2<\/strong><\/h4>\n<pre style=\"font-size: 110%;\">&lt;html&gt;\r\n&lt;head&gt;\r\n\r\n&lt;title&gt;Setting date and Time&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;h1&gt;Setting Date and Time &lt;\/h1&gt;\r\n&lt;script language=javascript&gt;\r\n\r\nMyDate=new Date()\r\nMyDate.setHours(13)\r\nMyDate.setMinutes(35)\r\nMyDate.setSeconds(24)\r\nMyDate.setDate(24)\r\nMyDate.setMonth(3)\r\nMyDate.setFullYear(2012)\r\n\r\ndocument.write(\"&lt;br&gt;&lt;font color=red&gt;The time is set to: &lt;\/font&gt;\"+MyDate)\r\n\r\n&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n\r\n<\/pre>\n<p>Click\u00a0<a href=\"http:\/\/javascript-tutor.net\/java_tutor\/Javascrpt_Example9.2.htm\">Example 9.2<\/a> to see the output<\/p>\n<h3><strong>9.4 : Customized Greeting<\/strong><\/h3>\n<p>We can customize greeting on a webpage according to the time of the day. You can do many things with greeting text, like changing its font size and color, or use bold font etc. The code is pretty simple, we just use the conditioning operator If.<br \/>\n<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block; text-align: center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-3033628290023372\" data-ad-slot=\"5669011038\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><br \/>\n<strong>Example 9.3<\/strong><\/p>\n<p>The Script:<\/p>\n<pre style=\"font-size: 110%;\">CurDate=new Date();\r\ntimeNow=CurDate.getHours();\r\nvar greeting;\r\nvar my_greet;\r\n\r\nif (timeNow&gt;18) {\r\ngreeting='Good Evening';\r\nmy_greet=greeting.fontcolor(\"orange\")\r\n} else if(timeNow&gt;12){\r\ngreeting='Good Afternoon';\r\nmy_greet=greeting.fontcolor(\"red\")\r\n} else if(timeNow&gt;0) {\r\n\r\ngreeting='Good Morning';\r\nmy_greet=greeting.fontcolor(\"blue\")\r\n;\r\n} else {\r\ngreeting='Good Day';\r\nmy_greet=greeting.fontcolor(\"cyan\")\r\n}\r\n\r\ndocument.getElementById('mygreeting').innerHTML=my_greet\r\n\r\nThe HTML document:\r\n\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;body&gt;\r\n\r\n&lt;h1&gt;Hi&amp;nbsp;&lt;b id=\"mygreeting\"&gt;&lt;\/b&gt;&lt;\/h1&gt;\r\n&lt;script type=\"text\/javascript\" src=\"cus_greet.js\"&gt;&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>view the output in<\/p>\n<p><a href=\"http:\/\/javascript-tutor.net\/jSample\/custom_greeting.html\">Custom Greeting<\/a><\/p>\n<p><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block; text-align: center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-3033628290023372\" data-ad-slot=\"5669011038\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<h4 align=\"center\"><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-8-looping\/\">&lt;Lesson 8&gt;<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/tutorial\/\">[Contents]<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-10-objects-part-2-math-object\/\">&lt;Lesson 10&gt;<\/a><\/h4>\n","protected":false},"excerpt":{"rendered":"<p>&lt;Lesson 8&gt; [Contents] &lt;Lesson 10&gt; JavaScript is an object-oriented programming language. JavaScript programming consists of commands that manipulate various kinds of objects using\u00a0properties and\u00a0methods. There are many built-in objects in JavaScript, among the most commonly used are Document object, Date object, Text object, Form object, String object, Password object, Location object, \u00a0Math object and more. &hellip; <a href=\"https:\/\/javascript-tutor.net\/index.php\/lesson-9-objects-part-1-date-object\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;JavaScript Lesson 9: The Date Object&#8221;<\/span><\/a><\/p>\n","protected":false},"author":35895,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-333","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Date Object in javascript<\/title>\n<meta name=\"description\" content=\"This javascript lesson shows how to create date object in javascript\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson9.html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Date Object in javascript\" \/>\n<meta property=\"og:description\" content=\"This javascript lesson shows how to create date object in javascript\" \/>\n<meta property=\"og:url\" content=\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson9.html\" \/>\n<meta property=\"og:site_name\" content=\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"article:modified_time\" content=\"2017-11-18T05:42:22+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-9-objects-part-1-date-object\/\",\"url\":\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson9.html\",\"name\":\"Date Object in javascript\",\"isPartOf\":{\"@id\":\"https:\/\/javascript-tutor.net\/#website\"},\"datePublished\":\"2011-12-18T16:27:49+00:00\",\"dateModified\":\"2017-11-18T05:42:22+00:00\",\"description\":\"This javascript lesson shows how to create date object in javascript\",\"breadcrumb\":{\"@id\":\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson9.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson9.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson9.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/javascript-tutor.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript Lesson 9: The Date Object\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/javascript-tutor.net\/#website\",\"url\":\"https:\/\/javascript-tutor.net\/\",\"name\":\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"description\":\"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.\",\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Date Object in javascript","description":"This javascript lesson shows how to create date object in javascript","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson9.html","og_locale":"en_US","og_type":"article","og_title":"Date Object in javascript","og_description":"This javascript lesson shows how to create date object in javascript","og_url":"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson9.html","og_site_name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","article_modified_time":"2017-11-18T05:42:22+00:00","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-9-objects-part-1-date-object\/","url":"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson9.html","name":"Date Object in javascript","isPartOf":{"@id":"https:\/\/javascript-tutor.net\/#website"},"datePublished":"2011-12-18T16:27:49+00:00","dateModified":"2017-11-18T05:42:22+00:00","description":"This javascript lesson shows how to create date object in javascript","breadcrumb":{"@id":"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson9.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson9.html"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/javascript-tutor.net\/jstutor\/jstutor_lesson9.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/javascript-tutor.net\/"},{"@type":"ListItem","position":2,"name":"JavaScript Lesson 9: The Date Object"}]},{"@type":"WebSite","@id":"https:\/\/javascript-tutor.net\/#website","url":"https:\/\/javascript-tutor.net\/","name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","description":"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.","inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/333","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/users\/35895"}],"replies":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/comments?post=333"}],"version-history":[{"count":27,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/333\/revisions"}],"predecessor-version":[{"id":2478,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/333\/revisions\/2478"}],"wp:attachment":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/media?parent=333"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}