Objectives and Skills[edit | edit source]
Objectives and skills for this lesson include:
- 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]
Multimedia[edit | edit source]
- YouTube: Date Objects
- YouTube: Displaying the Current/Live Date & Time on a Web Page
Examples[edit | edit source]
- W3Schools: Timing Events
- w3schools: Date Format For Date Picker
- Example Code
Activities[edit | edit source]
- 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.
- 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.
- 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.
- 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.
Lesson Summary[edit | edit source]
- The Date object is used to work with dates and times.
- Date objects are created with the new Date() constructor, which can take parameters: year, month, day, hours, minutes, seconds, milliseconds.
- The timing events setTimeout() executes once and setInterval() executes function continously can be used to execute code at time interval.
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.
- new date()
- Returns a new Date object that represents the current date and time.
- Allows you to add properties and methods to an object.
- A method calls a function or evaluates an expression at specified intervals (in milliseconds).
- A method calls a function or evaluates an expression after a specified number of milliseconds.
- The Universal Coordinated Time (UTC) is the time set by the World Time Standard.
See Also[edit | edit source]
- MDN: input type="date"
- MDN: Date
- Phoenix Nap: Date and Time
- Toptal: Date and Time
References[edit | edit source]
- Epoch & Unix Timestamp
- W3Schools: Universal Coordinated Time