Jump to content

JavaScript Programming/Date and Time

Add links
From Wikiversity
JavaScript Programming
  1. Introduction
  2. Variables and Expressions
  3. Functions
  4. Events
  5. Conditions
  6. While Loops
  7. For Loops
  8. Arrays
  9. Date and Time
  10. Objects
  11. DOM and BOM
  12. Dynamic HTML
  13. Forms and Security
  14. AJAX and JSON
  15. Libraries and Frameworks
  16. Node.js REST API
Download Learning Guide

This lesson introduces JavaScript objects using dates.

Objectives and Skills

[edit | edit source]

Objectives and skills for this lesson include:[1]

  • Complete and debug code that uses objects
    • Properties; methods; instantiation; Date object; retrieve date and time parts; localize date format (MM/DD vs DD/MM); add and subtract dates

Readings

[edit | edit source]
  1. Wikibooks: JavaScript/Dates

Multimedia

[edit | edit source]
  1. YouTube: Date Objects
  2. YouTube: Display and Change the Time And Date With JavaScript
  3. YouTube: Date methods in JavaScript
  4. YouTube: Displaying the Current/Live Date & Time on a Web Page
  5. YouTube: JavaScript Programming Tutorial 48 - Using Dates and Unix Timestamps in JavaScript
  6. #16 How to use the JS Date object | JavaScript Full Tutorial

Examples

[edit | edit source]

Activities

[edit | edit source]

Complete the following activities using external JavaScript code. Apply JavaScript best practices, including comments, indentations, naming conventions, and constants. Use input elements for input and respond to input or change events, add buttons and respond to click events, or set a timer interval and respond to interval events. Use HTML elements for output. Use separate functions for each type of processing. Avoid global variables by passing parameters and returning results. Create test data to validate the accuracy of each program. Add comments at the top of the program and include references to any resources used.

  1. Create a web page to display the current date and time. Rather than displaying the date and time as a single string, use output elements and Date methods to separately display the year, month, day, hour, minute, and second. Set a timer interval so the current time updates automatically every second.
  2. Create a web page with a date picker (input type="date"). When a user selects a date, use output elements to separately display the selected month, day, and year. Be sure to account for UTC/time zone when displaying the selected date.
  3. Create a web page with a date picker (input type="date"). Add number fields (input type="number") that allow the user to add years, months, and days to the selected date. Limit additional months to 0-11. Limit additional days to 0-30. As the number fields change, use an output element to display the result of adding the given years, months, and days to the selected date.
  4. Create a web page with two date pickers (input type="date"). When a user selects both dates, use output elements to display the number of years, months, and days between the two dates.
  5. Use JavaScript Date.now() and loops to time two different ways to implement the same thing. For example, is it faster to use a local variable or update an HTML element on each loop iteration?

Lesson Summary

[edit | edit source]
  • The Date object is used to work with dates and times.[2]
  • By default, JavaScript will use the browser's time zone and display a date as a full-text string.[3]
  • Date objects are created with the new Date() constructor, which can take parameters: year, month, day, hours, minutes, seconds, milliseconds.[3]
  • JavaScript stores dates as the number of milliseconds since Unix Epoch (January 01, 1970, 00:00:00 UTC).[3]
  • The JavaScript Date object has a list of get methods that can be used to get date's information such as day, hours, minutes, etc.[4]
  • The JavaScript Date object also has a list of set methods that can be used to set date's information in a Date object.[5]
  • The "date" input type creates a drop-down in html.
  • The timing events setTimeout() executes once and setInterval() executes function continously can be used to execute code at time interval.[6]
  • A UNIX epoch time and JavaScript date are not the same. Unix epoch time is seconds Ince the Unix Epoch, whereas the JavaScript date is milliseconds. [7]

Key Terms

[edit | edit source]
epoch Time
Epoch time or Unix time is a way to track time as a running total of seconds. This count starts at the Unix Epoch on January 1st, 1970 at UTC. Therefore, the Unix time stamp is merely the number of seconds between a particular date and the Unix Epoch.[8]
ISO
ISO is the International standard for the representation of dates and times. The ISO syntax is YYYY-MM-DD, and is the preferred JavaScript date format.[9]
new date()
Returns a new Date object that represents the current date and time.[10]
prototype
Allows you to add properties and methods to an object.[11]
setInterval()
A method calls a function or evaluates an expression at specified intervals (in milliseconds).[12]
setTimeout()
A method calls a function or evaluates an expression after a specified number of milliseconds.[13]
UTC
The Universal Coordinated Time (UTC) is the time set by the World Time Standard.[14]

See Also

[edit | edit source]

References

[edit | edit source]
  1. ↑ Microsoft: Exam 98-382 Introduction to Programming Using JavaScript
  2. ↑ W3Schools: JavaScript Date Reference
  3. ↑ 3.0 3.1 3.2 W3Schoolsː JavaScript Date Objects
  4. ↑ W3Schools: JavaScript Date Methods
  5. ↑ W3Schools: JavaScript Set Date Methods
  6. ↑ W3Schools: JavaScript Timing Events
  7. ↑ "Date - JavaScript | MDN". developer.mozilla.org. Retrieved 2021-03-26.
  8. ↑ Epoch & Unix Timestamp
  9. ↑ "JavaScript Date Formats". www.w3schools.com. Retrieved 2023-03-17.
  10. ↑ "Date JavaScript API". www.javascripture.com. Retrieved 2020-10-20.
  11. ↑ [1]
  12. ↑ [2]
  13. ↑ [3]
  14. ↑ W3Schools: Universal Coordinated Time
Retrieved from "https://en.wikiversity.org/w/index.php?title=JavaScript_Programming/Date_and_Time&oldid=2627693"