Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 5696d10

Browse files
Added date and time
1 parent bc81cd3 commit 5696d10

File tree

4 files changed

+142
-4
lines changed

4 files changed

+142
-4
lines changed

‎README.md

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,14 @@ This repository contains Vanilla JavaScript topics and their notes to learn from
5656
- [Function arguments and return values](./docs/functions.md#-function-arguments-and-return-values)
5757
- [Function Scope and closures](./docs/functions.md#-function-scope-and-closures)
5858
- [Arrow functions](./docs/functions.md#-arrow-functions)
59-
3. [DOM Manipulation:](./docs/dom-manipulation.md)
59+
3. [Date and Time:](./docs/date-and-time.md)
60+
- [Creating Date Objects](./docs/date-and-time.md#-creating-date-objects)
61+
- [Getting Date and Time Components](./docs/date-and-time.md#-getting-date-and-time-components)
62+
- [Formatting Dates and Times](./docs/date-and-time.md#-formatting-dates-and-times)
63+
- [Time Differences](./docs/date-and-time.md#-time-differences)
64+
- [Time Zones](./docs/date-and-time.md#-time-zones)
65+
- [Setting a Time](./docs/date-and-time.md#-setting-a-time)
66+
4. [DOM Manipulation:](./docs/dom-manipulation.md)
6067
- [Selecting elements](./docs/dom-manipulation.md#-selecting-elements)
6168
- [Creating elements](./docs/dom-manipulation.md#-creating-elements)
6269
- [Adding elements](./docs/dom-manipulation.md#-adding-elements)
@@ -98,7 +105,6 @@ This repository contains Vanilla JavaScript topics and their notes to learn from
98105
- [Matching patterns in strings](./docs/regular-expressions.md#-matching-patterns-in-strings)
99106
3. [JSON (JavaScript Object Notation):](./docs/json.md)
100107
- [Parsing and Manipulating](./docs/json.md#-parsing-and-manipulating)
101-
102108
4. [Web APIs:](./docs/web-apis.md)
103109
- [Fetch API](./docs/web-apis.md#-fetch-api)
104110
- [WebSockets](./docs/web-apis.md#-websockets)

‎docs/date-and-time.md

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
## ⚑ Date and Time
2+
JavaScript provides a rich set of built-in functions and objects to handle dates and times.
3+
4+
### ☴ Overview:
5+
1. [Creating Date Objects](#-creating-date-objects)
6+
2. [Getting Date and Time Components](#-getting-date-and-time-components)
7+
3. [Formatting Dates and Times](#-formatting-dates-and-times)
8+
4. [Time Differences](#-time-differences)
9+
5. [Time Zones](#-time-zones)
10+
6. [Setting a Time](#-setting-a-time)
11+
12+
### ✦ Creating Date Objects:
13+
To create a `Date` object to represent a specific instant in time.
14+
15+
*Example:*
16+
```javascript
17+
// Current time
18+
const now = new Date();
19+
console.log(now); // Output: Fri Nov 22 2024 17:02:07 GMT+0530 (India Standard Time) (example)
20+
21+
// Specific date and time
22+
const specificDate = new Date(2024, 10, 22, 16, 59, 0); // Month is 0-indexed (Starts January with 0)
23+
console.log(specificDate); // Output: Fri Nov 22 2024 16:59:00 GMT+0530 (India Standard Time) (example)
24+
```
25+
26+
### ✦ Getting Date and Time Components:
27+
To get various components from a `Date` object.
28+
29+
*Example:*
30+
```javascript
31+
// Current time
32+
const now = new Date();
33+
34+
// Various date components
35+
const year = now.getFullYear();
36+
const month = now.getMonth() + 1; // Months are 0-indexed
37+
const date = now.getDate();
38+
const day = now.getDay(); // Day of the week (0-6, 0 is Sunday)
39+
const hours = now.getHours();
40+
const minutes = now.getMinutes();
41+
const seconds = now.getSeconds();
42+
const milliSeconds = now.getMilliseconds();
43+
44+
console.log(`Date: ${date}/${month}/${year} Time: ${hours}:${minutes}:${seconds}`);
45+
// Output: Date: 22/11/2024 Time: 17:5:46 (example)
46+
```
47+
48+
### ✦ Formatting Dates and Times:
49+
To format dates and times using the `toLocaleString()` and `toLocaleTimeString()` methods.
50+
51+
*Example:*
52+
```javascript
53+
// Current time
54+
const now = new Date();
55+
56+
const formattedDate = now.toLocaleDateString();
57+
const formattedTime = now.toLocaleTimeString();
58+
const formattedDateTime = now.toLocaleString('en-IN', {
59+
year: 'numeric',
60+
month: 'long',
61+
day: 'numeric',
62+
hour: 'numeric',
63+
minute: 'numeric',
64+
second: 'numeric',
65+
timeZoneName: 'short'
66+
});
67+
68+
console.log(formattedDate); // Output: 11/22/2024 (example)
69+
console.log(formattedTime); // Output: 5:10:11 PM (example)
70+
console.log(formattedDateTime); // Output: 22 November 2024 at 5:08:57 pm IST (example)
71+
```
72+
73+
*Example:* Custom Formatting
74+
```javascript
75+
let now = new Date();
76+
let options = { year: 'numeric', month: 'long', day: 'numeric' };
77+
let formattedDate = new Intl.DateTimeFormat('en-US', options).format(now);
78+
console.log(formattedDate); // Output: November 22, 2024 (example)
79+
```
80+
81+
### ✦ Time Differences:
82+
To calculate the difference between two given dates using the `getTime()` method, which returns the number of milliseconds since the Unix epoch.
83+
84+
```javascript
85+
const date1 = new Date(2024, 11, 1);
86+
const date2 = new Date(2025, 0, 1);
87+
88+
const timeDifference = date2.getTime() - date1.getTime();
89+
const daysDifference = timeDifference / (1000 * 60 * 60 * 24);
90+
91+
console.log(timeDifference); // Output: 2678400000
92+
console.log(daysDifference); // Output: 31
93+
```
94+
95+
### ✦ Time Zones:
96+
To work with different time zones using the `getTimezoneOffset()` method.
97+
98+
```javascript
99+
const offset = now.getTimezoneOffset(); // Minutes offset from UTC
100+
```
101+
102+
To create a `Date` object in a specific time zone, by using the `toLocaleString()` method with appropriate options.
103+
104+
### ✦ Setting a Time:
105+
To set a specific components of a `Date` object.
106+
107+
```javascript
108+
// Current time
109+
const date = new Date();
110+
111+
date.setFullYear(2025);
112+
date.setMonth(0); // January
113+
date.setDate(1);
114+
date.setHours(12);
115+
date.setMinutes(0);
116+
date.setSeconds(0);
117+
118+
console.log(date); // Output: Wed Jan 01 2025 12:00:00 GMT+0530 (India Standard Time)
119+
```
120+
121+
*Example:* Short way to specify a date
122+
```javascript
123+
let newYear = new Date(2025, 0, 31); // Month is 0-indexed (January is 0)
124+
console.log(newYear); // Output: Fri Jan 31 2025 00:00:00 GMT+0530 (India Standard Time)
125+
```
126+
127+
---
128+
[⇪ To Top](#-date-and-time)
129+
130+
[❮ Previous Topic](./functions.md)   [Next Topic ❯](./dom-manipulation.md)
131+
132+
[⌂ Goto Home Page](../README.md)

‎docs/dom-manipulation.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,6 @@ document.addEventListener("myCustomEvent", function() {
157157
---
158158
[⇪ To Top](#-dom-manipulation)
159159

160-
[❮ Previous Topic](./functions.md)   [Next Topic ❯](./objects.md)
160+
[❮ Previous Topic](./date-and-time.md)   [Next Topic ❯](./objects.md)
161161

162162
[⌂ Goto Home Page](../README.md)

‎docs/functions.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,6 @@ let greet = (name) => {
8686
---
8787
[⇪ To Top](#-functions)
8888

89-
[❮ Previous Topic](./control-flow.md)   [Next Topic ❯](./dom-manipulation.md)
89+
[❮ Previous Topic](./control-flow.md)   [Next Topic ❯](./date-and-time.md)
9090

9191
[⌂ Goto Home Page](../README.md)

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /