- 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.Introduction2 lessons, 07:42
1.1Introduction02:12
1.2Setup05:30
2.Language Fundamentals8 lessons, 1:00:53
2.1Variables06:33
2.2Data Types11:28
2.3Arithmetic, Assignment, and Comparison Operators10:24
2.4Unary, Logical, Comma, and Spread Operators09:02
2.5Operator Precedence03:50
2.6Reserved Words04:17
2.7Strict Mode04:34
2.8Functions10:45
3.Data Structures5 lessons, 22:52
3.1Arrays04:29
3.2Objects04:30
3.3Sets04:57
3.4Maps04:21
3.5Weak Maps and Weak Sets04:35
4.Controlling Program Execution7 lessons, 37:06
4.1Conditionals07:49
4.2Switch Statements04:41
4.3The For Loop06:39
4.4The `for .. in` Loop05:17
4.5The `for .. of` Loop04:02
4.6Iterators05:03
4.7While Loops03:35
5.Using JavaScript13 lessons, 1:44:36
5.1Working With Strings09:32
5.2Template Literals05:46
5.3Working With Numbers06:57
5.4Working With Arrays12:53
5.5Iterating and Transforming Arrays07:33
5.6Working With the Object Type13:55
5.7Object Literal Extensions06:45
5.8Working With Object Instances06:45
5.9Getters and Setters05:00
5.10Custom Objects11:28
5.11The `Math` API04:54
5.12Working With Dates and Times08:10
5.13The `Array` Constructor04:58
6.Functions8 lessons, 56:07
6.1The `this` Object06:15
6.2Working With Functions10:11
6.3Scope07:37
6.4Arrow Functions06:59
6.5Generator Functions08:13
6.6Closures05:00
6.7Prototypes06:26
6.8Default and Rest Parameters05:26
7.Miscellaneous6 lessons, 52:39
7.1Destructuring Assignments08:09
7.2AJAX08:30
7.3Regular Expressions10:51
7.4More About Regular Expressions08:38
7.5Classes06:48
7.6ES Modules09:43
8.Working With the DOM6 lessons, 37:39
8.1Selecting HTML Elements05:02
8.2Manipulating HTML Elements07:40
8.3DOM Traversal05:25
8.4Adding and Removing Elements04:45
8.5Creating Elements and Other Nodes04:39
8.6DOM Events10:08
9.Web APIs4 lessons, 17:41
9.1The Selector API03:03
9.2Geolocation05:29
9.3Web Storage05:24
9.4Web Workers03:45
10.Asynchronous JavaScript5 lessons, 26:23
10.1Promises09:52
10.2Promise Chaining05:11
10.3The async Keyword03:21
10.4The await Keyword04:04
10.5More About async and await03:55
11.Conclusion1 lesson, 00:43
11.1Conclusion00: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.