Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

5.12 Working With Dates and Times

In this lesson, we’ll look at how to work with dates and times in JavaScript. I’ll show you how to create new instances of the Date class, modify them, and output them to strings.

Syntax

  • Date
  • getDate
  • getMonth
  • getFullYear
  • getUTCDate
  • getUTCMonth
  • getUTCFullYear
  • getDay
  • getUTCDay
  • toString
  • toUTCString
  • toDateString
  • toTimeString
  • toISOString
  • toLocaleString

1.Introduction
2 lessons, 07:42

1.1
Introduction
02:12

1.2
Setup
05:30

2.Language Fundamentals
8 lessons, 1:00:53

2.1
Variables
06:33

2.2
Data Types
11:28

2.3
Arithmetic, Assignment, and Comparison Operators
10:24

2.4
Unary, Logical, Comma, and Spread Operators
09:02

2.5
Operator Precedence
03:50

2.6
Reserved Words
04:17

2.7
Strict Mode
04:34

2.8
Functions
10:45

3.Data Structures
5 lessons, 22:52

3.1
Arrays
04:29

3.2
Objects
04:30

3.3
Sets
04:57

3.4
Maps
04:21

3.5
Weak Maps and Weak Sets
04:35

4.Controlling Program Execution
7 lessons, 37:06

4.1
Conditionals
07:49

4.2
Switch Statements
04:41

4.3
The For Loop
06:39

4.4
The `for .. in` Loop
05:17

4.5
The `for .. of` Loop
04:02

4.6
Iterators
05:03

4.7
While Loops
03:35

5.Using JavaScript
13 lessons, 1:44:36

5.1
Working With Strings
09:32

5.2
Template Literals
05:46

5.3
Working With Numbers
06:57

5.4
Working With Arrays
12:53

5.5
Iterating and Transforming Arrays
07:33

5.6
Working With the Object Type
13:55

5.7
Object Literal Extensions
06:45

5.8
Working With Object Instances
06:45

5.9
Getters and Setters
05:00

5.10
Custom Objects
11:28

5.11
The `Math` API
04:54

5.12
Working With Dates and Times
08:10

5.13
The `Array` Constructor
04:58

6.Functions
8 lessons, 56:07

6.1
The `this` Object
06:15

6.2
Working With Functions
10:11

6.3
Scope
07:37

6.4
Arrow Functions
06:59

6.5
Generator Functions
08:13

6.6
Closures
05:00

6.7
Prototypes
06:26

6.8
Default and Rest Parameters
05:26

7.Miscellaneous
6 lessons, 52:39

7.1
Destructuring Assignments
08:09

7.2
AJAX
08:30

7.3
Regular Expressions
10:51

7.4
More About Regular Expressions
08:38

7.5
Classes
06:48

7.6
ES Modules
09:43

8.Working With the DOM
6 lessons, 37:39

8.1
Selecting HTML Elements
05:02

8.2
Manipulating HTML Elements
07:40

8.3
DOM Traversal
05:25

8.4
Adding and Removing Elements
04:45

8.5
Creating Elements and Other Nodes
04:39

8.6
DOM Events
10:08

9.Web APIs
4 lessons, 17:41

9.1
The Selector API
03:03

9.2
Geolocation
05:29

9.3
Web Storage
05:24

9.4
Web Workers
03:45

10.Asynchronous JavaScript
5 lessons, 26:23

10.1
Promises
09:52

10.2
Promise Chaining
05:11

10.3
The async Keyword
03:21

10.4
The await Keyword
04:04

10.5
More About async and await
03:55

11.Conclusion
1 lesson, 00:43

11.1
Conclusion
00:43


5.12 Working With Dates and Times

Hi folks, in this lesson we're gonna see how we can work with dates and times in JavaScript. The date object in JavaScript is interesting, because it can only be generated with a constructor, which means that we must use the new keyword with it. There is no literal syntax for creating dates or times. A date object represents a specific instant in time. JavaScript measures time in milliseconds since midnight at the start of the 1st of January 1970, a date referred to as the start of the Unix epoch. This date is represented by a date object with a value of 0. So let's create a date object and we need to do that using the date constructor. And let's just log that to the console quickly, And this gives us the date. So I said just a moment ago that we have to use the new keyword with the date constructor. Let's just look at what happens if we forget. So in this case, the output looks exactly the same, because we're just logging it to the console. But the difference between the two versions is that the second version is a string, whereas the first version is a proper date object. Let's just verify that using typeof. So we can see that at the moment it's a string. But if we go back in at the new keyword, like we had originally, We now see object. And that's important because when we create a date in JavaScript, we will generally invoke methods on that date in order to extract different parts of the date or format it in some way. And we won't be able to call any methods on a string, because a string doesn't have any of the special date methods or properties. We can also create date objects of a specific date and time. To do that, we can pass various arguments to the constructor. We can pass a single number, and this number should represent the number of milliseconds since the start of the Unix epoch. For example, So what date do you think partytime is going to refer to? That's right, it's the changing of the millennium at one minute to midnight. That was a good night. So when we pass a single numerical argument, that number is the number of milliseconds which have elapsed since the beginning of the Unix epoch. We can also pass a string to the date constructor, and the constructor will attempt to parse a date out of it. And we can see that it has managed to parse a proper date out of the string, September 9th, 1978. If we pass a string to the date constructor that doesn't contain a date, we'll get the string invalid date returned instead. Lastly, we can also pass in a series of arguments which represent the year, month, date, hour, minute, second, and millisecond for the date that we'd like to create. As you can see, if we don't specify a time, the time part of the date defaults to exactly midnight on the specified date. Months are 0-based, so January is 0, February is 1, and so on and so forth. We didn't specify any times in the special date that we just created, and so it defaults it to midnight. Date objects don't really have any properties that we'll need to make use of very often. They have a constructor property, which points to the date constructor. The constructor itself has a prototype and length properties. But generally, when we work with date objects, we'll be making use of their methods rather than their properties, and there are many, many methods that we can make use of. The different methods can be broadly categorized into three different types of methods, getters, setters, and converters. Let's look at some of the getters first. We can get either the day of the month or the month of the year for the local time using getDay, getMonth, or getFullYear. There is also a getYear method, instead of getFullYear, but this only returns the last two digits of the year and has been deprecated, so it's best to avoid it. As well as local time, we can also get these same values in UTC. In this example, the values are exactly the same. We can also get the day of the week or the UTC day of the week. Days of the week in JavaScript also start at 0, and Sunday is actually the first day of the week. There are also methods to get any of the time components in both local and UTC format as well. As well as getting any these different components of the date or time, we can also set them, again, in local or UTC times. The converter methods are all getters as well, and they return transformed versions of date object. For example, to get the full date and time in string format, we can just use the toString method. We can also get the full date as a UTC string instead. The difference between these two strings is that the second version, the UTC version, doesn't have the number of hours offset that local times have. If we want to get just the date components without the time components, we can use toDateString instead. Similarly, if we want to get just the time component, we can use toTimeString. There isn't a method for getting just the time component in UTC, but we can get a string of the date in ISO 8601 extended format if we need to. There are also some methods we can use which are locale sensitive, including toLocaleString, toLocaleDateString and toLocaleTimeString. My system settings are set to EN-GB, so this method returns a string in a format that I am used to. So in this case, the date of the month comes before the month. That's why it's 3/9 instead of 9/3, which it would be in the standard EN-US format. So in this lesson, we looked at working with the date object in order to make use of date and time-related functionality in JavaScript. We saw how to create date objects using the date constructor and how to get, set, or convert different parts of the date or time. In the next lesson, we're going to finish up this section by looking at some of the more useful methods of the array constructor. Thanks for watching.

Back to the top
View on GitHub