Chào mọi người, hôm nay mình muốn giới thiệu với mọi người về Date Object, 1 trong những đối tượng mà chúng ta hầu như đều đụng đến ở mọi dự án.
Và mình muốn chia sẻ hiểu biết của mình về Date Object trong Javascript đến cho mọi người. Let’s go!
I. Khái niệm cơ bản:
JavaScript Date Object lets us work with dates:
1 2 | <span class="token keyword">const</span> today <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
What will happen when i call today?
Date Object được giới thiệu là một đối tượng - Object chứa thông tin về thời gian, và tất nhiên Date Object cũng có những method để giúp chúng ta lấy được giá trị đó.
II. Khai báo mới:
1 2 | <span class="token keyword">const</span> today <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Biến today sẽ có giá trị là thời điểm của đoạn code trên được biên dịch và thực hiện. Ví dụ nếu như code thực hiện vào 19:00 và pending
3 giây bằng setTimeout rồi console.log thì giá trị vẫn là 19:00 nha.
1 2 3 4 5 6 7 8 | <span class="token keyword">const</span> today <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>today<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// your current date</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>today<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// still the same</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">3000</span><span class="token punctuation">)</span> |
Ồ, bạn thấy 2 dãy số loằng ngoằng giống nhau thay vì giá trị thời gian như ở ví dụ ban đầu hả?
Mình có thay đổi 1 chút, sử dụng today lấy giá trị từ Date.now(). Nó sẽ lấy chính xác giá trị thời gian thôi, nhưng theo 1 định dạng khác, gọi là Dates as Milliseconds, sẽ lấy mốc là 00:00:00 ngày 01, tháng 1, năm 1970 (UTC).
1 2 3 4 5 | <span class="token comment">// get Dates as Milliseconds</span> <span class="token keyword">const</span> today_1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">valueOf</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> today_2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> today_3 <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Ngoài ra, chúng ta còn có thể tạo 1 Date Object từ dữ liệu có sẵn:
1 2 3 4 5 6 7 | <span class="token keyword">var</span> day_1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2020</span><span class="token punctuation">,</span> <span class="token number">06</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">00</span><span class="token punctuation">,</span> <span class="token number">00</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// params: year, month, day, hour, minute, second, and millisecond.</span> <span class="token keyword">var</span> day_2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">1998</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">01</span><span class="token punctuation">,</span> <span class="token number">06</span><span class="token punctuation">,</span> <span class="token number">33</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// params: year, month, day, hour, minute, second.</span> <span class="token comment">// tương tự chúng ta có thể rút ngắn params cho đến khi chỉ còn một biến thì đây sẽ là milliseconds</span> <span class="token keyword">var</span> day_3 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">1998</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// param: milliseconds.</span> <span class="token comment">// hoặc chúng ta có thể truyền vào một chuỗi (dateString):</span> <span class="token keyword">var</span> day_4 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token string">"January 10, 1998 06:33:00"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Hãy lưu ý rằng:
JavaScript counts months from 0 to 11.
January is 0. December is 11.
III. Format:
Có 3 kiểu định dạng Date chính trọng Javascript, trong đó kiểu ISO có tên đầy đủ là ISO-8601 và định dạng của IOS là YYYY-MM-DDTHH:mm:ss.sssZ cũng sẽ là kiểu mặc định khi bạn tạo mới 1 Date Object:
| Kiểu | Ví dụ |
|---|---|
| ISO Date | “1998-01-10” (The International Standard) |
| Short Date | 01/10/1998 |
| Long Date | “Jan 10 1998″ hoặc”10 Jan 1998” |
IV. Working with Date Object:
1. Date Methods:
Đối tượng Date Object cung cấp nhiều methods để xử lý thời gian, bạn có thể check list methods ở ĐÂY. Chúng ta sẽ đi qua một vài methods thường được dùng:
- getDate() : lấy ngày của tháng:
1 2 3 | <span class="token keyword">const</span> day <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">1998</span><span class="token punctuation">,</span> <span class="token number">01</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>day<span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// -> 10</span> |
- getDay() : lấy thứ trong tuần, với giá trị trả về là
0-6, tương ứng vớiSunday-Saturday:
1 2 3 | <span class="token keyword">const</span> day <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">1998</span><span class="token punctuation">,</span> <span class="token number">01</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>day<span class="token punctuation">.</span><span class="token function">getDay</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// -> 2</span> |
- getMonth() : lấy tháng với giá trị từ
0-11, tương ứng vớiJan-Dec:
1 2 3 | <span class="token keyword">const</span> day <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">1998</span><span class="token punctuation">,</span> <span class="token number">01</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>day<span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// -> 0</span> |
- getFullYear() : lấy năm:
1 2 3 | <span class="token keyword">const</span> day <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">1998</span><span class="token punctuation">,</span> <span class="token number">01</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>day<span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// -> 1998</span> |
Chúng ta cũng có methods lấy giờ:
- getMilliseconds() : lấy giây.
- getMinutes() : lấy phút.
- getHours() : lấy giờ:
1 2 3 | <span class="token keyword">const</span> day <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">1998</span><span class="token punctuation">,</span> <span class="token number">01</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>day<span class="token punctuation">.</span><span class="token function">getHours</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// -> vì không có param cho Hour nên mặc định là 0</span> |
Ngoài ra chúng ta còn có các methods cho giờ quốc tế bằng việc thêm UTC sau get và trước phần tử chúng ta cần lấy:
- getUTCDate(): lấy giờ theo mốc UTC.
2. Xử lý ngày giờ trong 1 project:
Như các bạn thấy, Date Object hỗ trợ chúng ta rất đầy đủ các methods, xong việc sử dụng lại là một vấn đề khác.
Chẳng hạn, chúng ta muốn lấy ra giờ hiện tại chẳng hạn, bạn có chắc mình sẽ thích sử dụng các methods của Date Object?
1 2 3 | <span class="token keyword">const</span> date <span class="token operator">=</span> now <span class="token function">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>date<span class="token punctuation">.</span><span class="token function">getHours</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token string">':'</span><span class="token punctuation">,</span>date<span class="token punctuation">.</span><span class="token function">getMinutes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// bạn hãy để ý nếu giờ bé hơn 10 sẽ không hiển thị ở định dạng 0X.</span> |
Nếu chúng ta lấy ra định dạng khác thì sao? Chẳng hạn: MM-DD-YYYY hh:mm, đoạn code trên sẽ rất là dài, nào là get giờ phút giây, rồi check xem giá trị có bé hơn 10 không để chèn thêm số 0.
Lúc này chúng ta thường tìm đến sự trợ giúp từ các Date Libraries bên ngoài, và được đông đảo người dùng nhất có lẽ là moment.js. Hỗ trợ nhiều dạng, từ format cho đến locales. Nhưng vấn đề của Moment.js khiến mình và nhiều Dev khác không thích có lẽ là kích thước:
Profile xịn xò từ phía moment.js
Nhưng chúng ta đã bỏ sót đi 1 bạn khác, đó là Intl – built-in Object của Javascript. Intl là 1 API ra mắt vào năm 2012 (đọc thêm ở đây nè!), với kha khá công dụng:
which provides language sensitive string comparison, number formatting, and date and time formatting.
Để có thể format date bằng methods DateTimeFormat:
1 2 | <span class="token comment">/* FORMAT: new Intl.DateTimeFormat(locales, options).format(DateTimeVariable); */</span> |
Ví dụ:
1 2 3 4 5 | <span class="token keyword">const</span> date <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Intl<span class="token punctuation">.</span>DateTimeFormat</span><span class="token punctuation">(</span><span class="token string">'en-US'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">format</span><span class="token punctuation">(</span>date<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// output: "MM/DD/YYYY"</span> |
Cách thức sử dụng Intl.DateTimeFormat cũng cực kỳ đơn giản:
- Thay đổi
localescho định dạng ngày tháng hoặc giờ. - Thay đổi
optionscho cách hiển thị:
1 2 3 | <span class="token keyword">const</span> options <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">const</span> formattedDate <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Intl<span class="token punctuation">.</span>DateTimeFormat</span><span class="token punctuation">(</span><span class="token string">'ja'</span><span class="token punctuation">,</span> options<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">format</span><span class="token punctuation">(</span>date<span class="token punctuation">)</span><span class="token punctuation">;</span> |
Các bạn có thể xem qua các option được hỗ trợ ở dây.
Bây giờ, quay về với bài toán định dạng MM-DD-YYYY hh:mm, chúng ta sẽ sử dụng Intl.DateTimeFormat:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <span class="token keyword">const</span> options <span class="token operator">=</span> <span class="token punctuation">{</span> year<span class="token punctuation">:</span> <span class="token string">'numeric'</span><span class="token punctuation">,</span> month<span class="token punctuation">:</span> <span class="token string">'2-digit'</span><span class="token punctuation">,</span> day<span class="token punctuation">:</span> <span class="token string">'2-digit'</span><span class="token punctuation">,</span> hour<span class="token punctuation">:</span> <span class="token string">'2-digit'</span><span class="token punctuation">,</span> minute<span class="token punctuation">:</span> <span class="token string">'2-digit'</span><span class="token punctuation">,</span> hour12<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">const</span> date <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> formattedDate <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Intl<span class="token punctuation">.</span>DateTimeFormat</span><span class="token punctuation">(</span><span class="token string">'en-US'</span><span class="token punctuation">,</span> options<span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">format</span><span class="token punctuation">(</span>date<span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/,/g</span><span class="token punctuation">,</span><span class="token string">''</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">///g</span><span class="token punctuation">,</span> <span class="token string">'-'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>formattedDate<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// -> MM-DD-YYYY hh:mm</span> |
Vậy là bạn đã biết thêm 1 cách làm việc với Date Object rồi phải không? Kể từ khi biết đến Intl.DateTimeFormat, mình đã từ chối mọi PR install moment.js trong các dự án có mình tham gia.
Song đây chỉ là lời khuyên của cá nhân mình thôi nhé, nếu một ngày bạn gặp 1 trường hợp làm việc với Date Object và cảm thấy phức tạp, bạn cũng có thể check qua list Date Time Libraries này!!~~