Skip to content

Commit 1dfa09a

Browse files
Date concept: update pages (#2660)
* Update concept pages * Don't give away default value * Attempt to re-order tree based on https://discord.com/channels/854117591135027261/1382013228909072394 * Fix links inside admonitions * Highlight headings in front-end * Fix exercism/advanced admonitions
1 parent 0674eef commit 1dfa09a

File tree

7 files changed

+285
-353
lines changed

7 files changed

+285
-353
lines changed

concepts/dates/.meta/config.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
22
"blurb": "JavaScript has a built-in `Date` object which stores date and time and provides methods to work with them.",
3-
"authors": ["JaPatGitHub"],
3+
"authors": ["SleeplessByte"],
44
"contributors": []
55
}

concepts/dates/about.md

Lines changed: 119 additions & 185 deletions
Large diffs are not rendered by default.

concepts/dates/introduction.md

Lines changed: 120 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -2,77 +2,104 @@
22

33
JavaScript has a built-in object `Date` which stores date and time, and provides methods for their management.
44

5+
<!-- prettier-ignore -->
6+
~~~exercism/caution
7+
It was based on Java's `java.util.Date` class, which was replaced in the early 2010s, but for backwards compatibility, JavaScript's `Date` sticks around.
8+
9+
Because of how hard it is to work with Dates in general and because of how bad or non-existing timezone handling is, many libraries exist such as `moment.js`, `day.js`, `date-fns` and `luxon`.
10+
None of these are available on Exercism.
11+
12+
In your own projects, do not use a deprecated / unmaintained package such as `moment.js` but rely on more modern alternatives like `luxon`, or the not yet widely available [Temporal][mdn-temporal].
13+
This exercise focusses on `Date`, which will remain relevant until the end of JavaScript.
14+
15+
[mdn-temporal]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Temporal
16+
~~~
17+
518
## Creation
619

7-
A `Date` object in an instance of the `Date` class. It can be created without passing any arguments to the constructor function. This results in a `Date` object that represents the current date and time:
20+
A `Date` object in an instance of the `Date` class.
21+
It can be created without passing any arguments to the constructor function.
22+
This results in a `Date` object that represents the current date and time:
823

924
```javascript
1025
const now = new Date();
1126
// => Thu Apr 14 2022 11:46:08 GMT+0530 (India Standard Time)
12-
13-
// Shows current day, date and time in your time zone.
27+
// Shows current day, date and time (in your time zone).
1428
```
1529

16-
However, different types of arguments can also be used to create date object, as follows:
30+
### Unix timestamp (number)
1731

18-
### Timestamp value
32+
If a number is passed in, this will be interpreted as a `timestamp`.
33+
A timestamp is an integer number representing the number of **milliseconds** that has passed since **1 January 1970 [UTC][defn-utc]+0**.
1934

20-
> A timestamp is an integer number representing the number of **milliseconds** that has passed since **Jan 1st of 1970 [UTC][utc-defn]+0**, however, _with reference to your local time zone._
21-
> This can be used as an argument for the Date object.
22-
>
23-
> ```javascript
24-
> const Jan01_1970 = new Date(0);
25-
> // 0 means 01.01.1970 UTC+0
26-
>
27-
> const Jan02_1970 = new Date(24 * 3600 * 1000);
28-
> // adding 24 hours, we get 02.01.1970 UTC+0
29-
>
30-
> // Note that the objects created here would show the corresponding time in your time zone.
31-
> ```
32-
>
33-
> [^1]
35+
```javascript
36+
const epoch = new Date(0);
37+
// Thu Jan 01 1970 01:00:00 GMT+0100 (Central European Standard Time)
3438

35-
### Timestamp string
39+
const another = new Date(1749508766627);
40+
// Tue Jun 10 2025 00:39:26 GMT+0200 (Central European Summer Time)
41+
```
42+
43+
One may expect `new Date(0)` to generate the "earliest" date object, but JavaScript will convert the date to your local timezone, which means that only those around [GMT / with an UTC+0][defn-gmt] timezone will actually get the [Unix epoch][defn-unix-epoch] value.
44+
45+
### ISO 8601 timestamp (string)
3646

3747
You can pass a string value representing a date to the `Date` constructor.
38-
The string needs to follow a format that is recognized by the `Date.parse()` method.
39-
You will learn more about this below.
48+
The **only** format that is consistent across implementations is the [simplified version][mdn-date-string-format] of the internationally recognized and standardized so-called [ISO 8601 timestamp strings][defn-iso8601].
49+
50+
A moment in time at [UTC][defn-gmt] looks like this:
51+
52+
```text
53+
YYYY-MM-DDTHH:MM:SSZ
54+
YYYYMMDDTHHMMSSZ
55+
```
56+
57+
Where the following substitutions take place:
58+
59+
| Key | Description |
60+
| ---- | ------------------------------------------- |
61+
| YYYY | The calendar year, represented in 4 digits |
62+
| MM | The calendar month, represented in 2 digits |
63+
| DD | The calendar day, represented in 2 digits |
64+
| HH | The hours in a 24-hour clock, 2 digits |
65+
| MM | The minutes, 2 digits |
66+
| SS | The seconds, 2 digits |
67+
68+
The letter `T` separates the date from the time.
69+
The letter `Z` indicates UTC (no timezone, no Day Light Savings).
70+
71+
<!-- prettier-ignore -->
72+
~~~exercism/caution
73+
Other formats that are accepted by `Date.parse` may or may not work.
74+
When working with Dates in JavaScript, _always_ use an ISO 8601 timestamp when converting from a `string` to a `Date`.
75+
76+
Date-only forms are allowed, but not all ISO 8601 formats are supported.
77+
Consult the [simplified version explanation page on MDN][mdn-date-string-format].
78+
79+
[mdn-date-string-format]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#date_time_string_format
80+
~~~
81+
82+
If the timestamp does not end in `Z`, and it does not end with `+HH:MM` or `-HH:MM`, indicating a timezone offset, because of historical reasons, the following applies:
83+
84+
> When the time zone offset is absent, date-only forms are interpreted as a UTC time and date-time forms are interpreted as a local time.
85+
> The interpretation as a UTC time is due to a historical spec error that was not consistent with ISO 8601 but could not be changed due to web compatibility.
86+
> See [Broken Parser – A Web Reality Issue][ref-broken-parser].
4087
4188
### Date object
4289

43-
An existing date object can also be used as an argument.
90+
An existing date object can also be used as a constructor argument.
4491
This makes a copy of the existing `Date` object with the same date and time.
4592

4693
```javascript
4794
const t1 = new Date();
4895
const t2 = new Date(t1);
49-
5096
// Values of t1 and t2 will be the same.
5197
```
5298

53-
### Individual date and time component values
54-
55-
> Given at least a year and month, this form of `Date()` returns a `Date` object whose component values _(year, month, day, hour, minute, second, and millisecond)_ all come from the following parameters.
56-
> Any missing fields are given the lowest possible value (1 for day and 0 for every other component).
57-
> The parameter values are all evaluated against the _local time zone, rather than UTC_.
58-
>
59-
> - `year`: Integer values from 0 to 99 map to the years 1900 to 1999.
60-
> All other values are the actual year.
61-
> - `monthIndex`: Integer value representing the month, beginning with _0 for January to 11 for December_.
62-
> If a value greater than 11 is passed in, then those months will be added to the date.
63-
> For example, new Date(1990, 12, 1) will return January 1st, 1991.
64-
> - `day` (Optional): Integer value representing the day of the month.
65-
> The default is 1.
66-
> - `hours` (Optional): Integer value between 0 and 23 representing the hour of the day.
67-
> Defaults to 0.
68-
> - `minutes` (Optional): Integer value representing the minute segment of a time.
69-
> The default is 0 minutes past the hour.
70-
> - `seconds` (Optional): Integer value representing the second segment of a time.
71-
> The default is 0 seconds past the minute.
72-
> - `milliseconds` (Optional): Integer value representing the millisecond segment of a time.
73-
> The default is 0 milliseconds past the second.
74-
>
75-
> [^2]
99+
### Supplying individual date and time component values
100+
101+
A date representing a date can be created by passing three numbers.
102+
A date representing a date and time can be created by passing in 6 numbers.
76103

77104
```javascript
78105
const date1 = new Date(95, 11, 17);
@@ -82,118 +109,74 @@ const date2 = new Date(2013, 12, 5, 13, 24, 0);
82109
// Creates Date for Jan 5 2014 13:24 if your local timezone is equivalent to UTC.
83110
```
84111

85-
## `Date.parse()`
86-
87-
`Date.parse()` takes **string as a input and returns a timestamp** (number of milliseconds from 1 Jan 1970 UTC+0), provided the string is in the format YYYY-MM-DDTHH:mm:ss.sssZ, where:
88-
89-
> - `YYYY-MM-DD` - is the date: year-month-day.
90-
> - `T` - The character "T" is used as the delimiter
91-
> - `HH:mm:ss.sss` - is the time: hours, minutes, seconds and milliseconds.
92-
> - `Z` - This _optional_ part denotes the time zone.
93-
> If `Z` is present, the `Date` will be set to UTC.
94-
> If `Z` is not present, it will be Local Time.
95-
>
96-
> If the format is invalid, `NaN` is returned. [^3]
112+
The second value is the `month`, which starts at `0` for January, up to `11` for December.
97113

98-
Shorter variants are also possible, like `YYYY-MM-DD` or `YYYY-MM` or even `YYYY`. However, note that these variants **set the `Date` to UTC**, even though `Z` not mentioned.
99-
To understand what exactly happens check out [this section][mdn-diff-assumed-timezone] of a MDN page.
114+
## `Date.parse()`
100115

101-
<!-- prettier-ignore-start -->
102-
~~~~exercism/caution
103-
The use of `Date.parse()` (and the timestamp string method which works similarly) is strongly discouraged due to browser differences and inconsistencies. [^4]
104-
~~~~
105-
<!-- prettier-ignore-end -->
116+
You may find mentions of or references to a date parsing function `Date.parse`.
117+
Because there are only a few invariants (truths) for this function and because the rest of the implementation is not specified (and thus not standard), one should not use it.
106118

107119
## Accessing `Date` components
108120

109-
The following are the methods to access the year, month and so on from the Date object:
110-
111-
> - `getFullYear()`- Get the year (4 digits)
112-
> - `getMonth()`- Get the month, from 0 to 11.
113-
> - `getDate()`- Get the day of month, from 1 to 31.
114-
> - `getHours()`, `getMinutes()`, `getSeconds()`, `getMilliseconds()`- Get the corresponding time components.
115-
> - `getDay()`- Get the day of week, from 0 (Sunday) to 6 (Saturday).
116-
> - `getTime()`- Get the number of milliseconds passed since 01.01.1970 UTC.
117-
>
118-
> [^5]
121+
There are various methods on date objects that return the components of the date:
119122

120123
```javascript
121-
const date0 = new Date(0); //Jan 1 1970 00:00:00
122-
let month = date0.getMonth()); // => 0; as Jan is the month
123-
let date = date0.getDay(); // Find out which day the new year of 1970 was!
124-
125-
const date1 = new Date(2020, 11, 13, 5); // Dec 13 2020 5:00:00
126-
let millsecs = date1.getTime(); // find out how many have milliseconds passed since Jan 1 1890!
124+
getFullYear(); // Get the year (4 digits)
125+
getMonth(); // Get the month, from 0 to 11.
126+
getDate(); // Get the day of month, from 1 to 31.
127+
getHours(); // Get the hour in a 24 clock, from 0 to 23
128+
getMinutes(); // Get the minutes, from 0 to 59
129+
getSeconds(); // Get the seconds, from 0 to 59
130+
getMilliseconds(); // Get the milliseconds, from 0 and 999
131+
getDay(); // Get the day of week, from 0 (Sunday) to 6 (Saturday).
127132
```
128133

129-
## Modifying `Date` components
130-
131-
The following methods allow to modify date/time components :
132-
133-
> - `setFullYear(year, [month], [date])`
134-
> - `setMonth(month, [date])`
135-
> - `setDate(date)`
136-
> - `setHours(hour, [min], [sec], [ms])`
137-
> - `setMinutes(min, [sec], [ms])`
138-
> - `setSeconds(sec, [ms])`
139-
> - `setMilliseconds(ms)`
140-
> - `setTime(timestamp)` (sets the whole date by milliseconds since 01.01.1970 UTC)
141-
>
142-
> Parameters in `[]` above are _optional_.
143-
> If not mentioned, the components are not modified.
144-
> Every one of them except `setTime()` has a UTC-variant, for instance: `setUTCHours()`. [^6]
134+
Each of these has an applicable `set` variant (e.g. `setFullYear`) to update the value.
135+
Any overflowing value rolls over to the next component:
145136

146137
```javascript
147-
let today = new Date();
148-
149-
today.setHours(0); // still today, but only the hour is changed to 0
150-
151-
today.setHours(0, 0, 0, 0); // still today, now sharply 00:00:00
152-
```
138+
const date = new Date('2025-02-28T12:42:00Z');
139+
// => Fri Feb 28 2025 13:42:00 GMT+0100 (Central European Standard Time)
153140

154-
## Calculating Time Difference and `Date.now()`
141+
date.setDate(29);
142+
// there was no February 29th in 2025.
155143

156-
To measure the time elapsed between two given dates, we can use the `Date.getTime()` method.
144+
date.getDate();
145+
// => 1
157146

158-
```javascript
159-
const d1 = new Date(2021, 12, 11, 5, 13, 32, 21);
160-
const d2 = new Date(2021, 12, 23, 4, 12, 55);
161-
162-
let timeElapsed = d2.getTime() - d1.getTime(); // => 1033162979
147+
date.toString();
148+
// => Sat Mar 01 2025 13:42:00 GMT+0100 (Central European Standard Time)
163149
```
164150

165-
Moreover, if we wish to measure the time taken on a live basis, for example the time taken for execution for program, we could use `Date.now()` which provides the timestamp of current time.
166-
167-
## Comparing Dates
168-
169-
We can use `<` and `>` operators to compare two `Date` objects, the date occuring _later being treated as greater_.
151+
There are UTC variants for all the methods that disregard the local timezone.
170152

171-
The `==` or `===` do not work with `Date`, and output `false` in any case, even if dates are equal.
172-
However, we could use the `Date.getTime()` method to obtain the timestamps (which is of the data type `number`) and compare them using equality operators.
153+
## Converting from date
173154

174-
```javascript
175-
const d1 = new Date(2021, 12, 11);
176-
const d2 = new Date(1990, 11, 23);
155+
Date objects have a method `getTime()` that returns the UNIX timestamp in milliseconds, ie. amount of milliseconds the midnight at the beginning of January 1, 1970, UTC.
156+
Additionally, a method `toISOString()` is available to convert from a date object to a ISO 8601 timestamp string.
177157

178-
d1 > d2; // true
179-
180-
const d1Copy = new Date(d1); // d1Copy will be same as d1
181-
182-
d1Copy === d1; // false, even though they are same
183-
d1Copy.getTime() === d1.getTime(); //true
184-
```
185-
186-
[^1]: https://javascript.info/date
158+
## Comparing Dates
187159

188-
[^2]: https://javascript.info/date#setting-date-components
160+
Greater than (`>`) and greater than or equals (`>=`) as well as less than (`<`) and less than or equals (`<=`) can be used directly between two dates or a date and a number.
161+
This works because JavaScript will try to coerce the date to a primitive.
189162

190-
[^3]: https://javascript.info/date#date-parse-from-a-string
163+
<!-- prettier-ignore -->
164+
~~~exercism/advanced
165+
When doing a comparison between two dates or date and a number, JavaScript calls [`[Symbol.toPrimitive]("number")`][mdn-to-primitive] which internally calls [`date.valueOf()`][mdn-date-value-of].
166+
The latter is the same as calling [`date.getTime()`][mdn-date-get-time].
191167
192-
[^4]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date#several_ways_to_create_a_date_object
168+
If you do not want to rely on this behaviour, convert to a number using `getTime()` first.
193169
194-
[^5]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date#several_ways_to_create_a_date_object
170+
[mdn-to-primitive]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Symbol.toPrimitive
171+
[mdn-date-value-of]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/valueOf
172+
[mdn-date-get-time]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getTime
173+
~~~
195174

196-
[^6]: https://javascript.info/date#access-date-components
175+
Dates cannot be compared using equality (`==`, and `===`), but the result of `.getTime()` can.
197176

198-
[utc-defn]: https://simple.wikipedia.org/wiki/Coordinated_Universal_Time
199-
[mdn-diff-assumed-timezone]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse#differences_in_assumed_time_zone
177+
[defn-utc]: https://simple.wikipedia.org/wiki/Coordinated_Universal_Time
178+
[defn-gmt]: https://simple.wikipedia.org/wiki/Greenwich_Mean_Time
179+
[defn-unix-epoch]: https://en.wikipedia.org/wiki/Epoch_%28computing%29
180+
[defn-iso8601]: https://en.wikipedia.org/wiki/ISO_8601
181+
[mdn-date-string-format]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#date_time_string_format
182+
[ref-broken-parser]: https://maggiepint.com/2017/04/11/fixing-javascript-date-web-compatibility-and-reality/

concepts/dates/links.json

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,23 @@
44
"description": "javascript.info: Date"
55
},
66
{
7-
"url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date",
8-
"description": "MDN: Date() Constructor"
7+
"url": "https://en.wikipedia.org/wiki/Epoch_%28computing%29",
8+
"description": "Wikipedia: epoch (computing)"
99
},
1010
{
11-
"url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse",
12-
"description": "MDN: Date.parse()"
11+
"url": "https://en.wikipedia.org/wiki/ISO_8601",
12+
"description": "Wikipedia: ISO 8601 format"
13+
},
14+
{
15+
"url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date",
16+
"description": "MDN: Date"
17+
},
18+
{
19+
"url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#date_time_string_format",
20+
"description": "MDN: Date time string format"
21+
},
22+
{
23+
"url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Temporal",
24+
"description": "MDN: Temporal"
1325
}
1426
]

0 commit comments

Comments
 (0)