{"id":114,"date":"2024-11-11T04:54:23","date_gmt":"2024-11-11T04:54:23","guid":{"rendered":"https:\/\/techkubo.com\/javascript\/?p=114"},"modified":"2025-05-17T03:45:39","modified_gmt":"2025-05-17T03:45:39","slug":"javascript-data-and-time","status":"publish","type":"post","link":"https:\/\/techkubo.com\/javascript\/javascript-data-and-time\/","title":{"rendered":"JavaScript Date and Time"},"content":{"rendered":"\n

Creating a Date Object<\/strong><\/h2>\n\n\n\n

The Date<\/code> object is used to work with dates and times. You can create a new Date<\/code> object using the Date<\/code> constructor.<\/p>\n\n\n\n

<\/p>\n\n\n\n

Explanation of Code:<\/strong><\/p>\n\n\n\n

This example creates a Date<\/code> object representing the current date and time.<\/p>\n\n\n\n

let currentDate = new Date();\nconsole.log(currentDate);  \/\/ Output: Current date and time<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
Getting Date and Time Values<\/strong><\/h2>\n\n\n\n
This example demonstrates how to get various parts of the date and time using methods like getFullYear()<\/code>, getMonth()<\/code>, getDate()<\/code>, getHours()<\/code>, getMinutes()<\/code>, getSeconds()<\/code>, getMilliseconds()<\/code>, and getDay()<\/code>.<\/p>\n\n\n\n
let date = new Date();\n\nlet year = date.getFullYear();\nconsole.log("Year: " + year);  \/\/ Output: Year: current year\n\nlet month = date.getMonth() + 1;\nconsole.log("Month: " + month);  \/\/ Output: Month: current month (0-11, so add 1)\n\nlet day = date.getDate();\nconsole.log("Day: " + day);  \/\/ Output: Day: current day of the month\n\nlet hours = date.getHours();\nconsole.log("Hours: " + hours);  \/\/ Output: Hours: current hour (0-23)\n\nlet minutes = date.getMinutes();\nconsole.log("Minutes: " + minutes);  \/\/ Output: Minutes: current minute (0-59)\n\nlet seconds = date.getSeconds();\nconsole.log("Seconds: " + seconds);  \/\/ Output: Seconds: current second (0-59)\n\nlet milliseconds = date.getMilliseconds();\nconsole.log("Milliseconds: " + milliseconds);  \/\/ Output: Milliseconds: current millisecond (0-999)\n\nlet dayOfWeek = date.getDay();\nconsole.log("Day of the Week: " + dayOfWeek);  \/\/ Output: Day of the Week: current day (0-6, Sunday=0)<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
Setting Date and Time Values<\/strong><\/h2>\n\n\n\n
This example demonstrates how to set various parts of the date and time using methods like setFullYear()<\/code>, setMonth()<\/code>, setDate()<\/code>, setHours()<\/code>, setMinutes()<\/code>, setSeconds()<\/code>, and setMilliseconds()<\/code>.<\/p>\n\n\n\n
let date = new Date();\n\ndate.setFullYear(2025);\nconsole.log("Year: " + date.getFullYear());  \/\/ Output: Year: 2025\n\ndate.setMonth(11);  \/\/ December (0-11)\nconsole.log("Month: " + (date.getMonth() + 1));  \/\/ Output: Month: 12\n\ndate.setDate(25);\nconsole.log("Day: " + date.getDate());  \/\/ Output: Day: 25\n\ndate.setHours(10);\nconsole.log("Hours: " + date.getHours());  \/\/ Output: Hours: 10\n\ndate.setMinutes(30);\nconsole.log("Minutes: " + date.getMinutes());  \/\/ Output: Minutes: 30\n\ndate.setSeconds(45);\nconsole.log("Seconds: " + date.getSeconds());  \/\/ Output: Seconds: 45\n\ndate.setMilliseconds(500);\nconsole.log("Milliseconds: " + date.getMilliseconds());  \/\/ Output: Milliseconds: 500<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
Parsing Dates<\/strong><\/h2>\n\n\n\n
You can create Date<\/code> objects from date strings using the Date.parse()<\/code> method or the Date<\/code> constructor.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Explanation of Code: <\/strong><\/p>\n\n\n\n
The Date.parse()<\/code> method parses a date string and returns the number of milliseconds since January 1, 1970, which can be used to create a Date<\/code> object.<\/p>\n\n\n\n
let dateString = "2024-11-11T12:00:00Z";\nlet parsedDate = new Date(Date.parse(dateString));\nconsole.log(parsedDate);  \/\/ Output: Parsed date and time<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
Formatting Dates<\/strong><\/h2>\n\n\n\n
You can format dates using various methods like toDateString()<\/code>, toTimeString()<\/code>, toLocaleDateString()<\/code>, toLocaleTimeString()<\/code>, etc.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Explanation of Code:<\/strong><\/p>\n\n\n\n
This example demonstrates how to format dates using methods like toDateString()<\/code>, toTimeString()<\/code>, toLocaleDateString()<\/code>, and toLocaleTimeString()<\/code>.<\/p>\n\n\n\n
let date = new Date();\n\nconsole.log("Date String: " + date.toDateString());  \/\/ Output: Date String: current date in readable format\nconsole.log("Time String: " + date.toTimeString());  \/\/ Output: Time String: current time in readable format\n\nconsole.log("Locale Date String: " + date.toLocaleDateString());  \/\/ Output: Locale Date String: current date in localized format\nconsole.log("Locale Time String: " + date.toLocaleTimeString());  \/\/ Output: Locale Time String: current time in localized format<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
JavaScript Date and Time Example Code<\/strong><\/h2>\n\n\n\n
Explanation of Code:<\/strong><\/p>\n\n\n\n
    \n
  • Creating a Date Object<\/strong>: Creates a Date<\/code> object with the current date and time.<\/li>\n\n\n\n
  • Getting Date Components<\/strong>: Retrieves various components of the date and time.<\/li>\n\n\n\n
  • Setting Date Components<\/strong>: Updates various components of the date and time.<\/li>\n<\/ul>\n\n\n\n
    <!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>JavaScript Date and Time Example<\/title>\n<\/head>\n<body>\n    <script>\n        \/\/ Creating a new date object with specific values\n        let now = new Date(2024, 9, 11, 12, 41, 9, 714); \/\/ Month is 0-based (9 = October)\n\n        console.log("Current Date and Time: " + now.toString());\n\n        console.log("Year: " + now.getFullYear());\n        console.log("Month: " + now.getMonth());\n        console.log("Date: " + now.getDate());\n        console.log("Hours: " + now.getHours());\n        console.log("Minutes: " + now.getMinutes());\n        console.log("Seconds: " + now.getSeconds());\n        console.log("Milliseconds: " + now.getMilliseconds());\n        console.log("Day of the Week: " + now.getDay());\n\n        \/\/ Setting updated date and time\n        let updatedDate = new Date();\n        updatedDate.setFullYear(2025);\n        updatedDate.setMonth(11); \/\/ December\n        updatedDate.setDate(25);\n        updatedDate.setHours(15);\n        updatedDate.setMinutes(30);\n        updatedDate.setSeconds(45);\n\n        console.log("Updated Date and Time: " + updatedDate.toString());\n    <\/script>\n<\/body>\n<\/html>\n<\/pre><\/div>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    <\/p>\n\n\n\n
    JavaScript Labs<\/strong><\/h2>\n\n\n\n