Bài 28 | Javascript Date – Javascript cơ bản (Phần 4) – SOGO
JavaScript Date đại diện cho một khoảnh khắc trong thời gian. Javascript Date Methods giúp ta có thể làm việc, thao tác với ngày và giờ một cách dễ dàng. Javascript Date Objects và Methods giúp ta có thể làm việc, thao tác với ngày và giờ trong Web một cách dễ dàng.
I. JavaScript Date Objects
Bằng mặc định, JavaScript sử dụng mốc giờ (time zone) của trình duyệt để hiện thị ngày giờ:
Sun Sep 15 2019 09:06:32 GMT+0700 (Indochina Time)
1. Tạo Javascript Date Objects
Date objects được tạo bằng new Date() constructor.
Cú pháp:
new Date()
new Date(year, month, day, hours, minutes, seconds, milliseconds)
new Date(milliseconds)
new Date(date string)a. new Date()
new Date()tạo new date object với thời gian hiện tại (current date time):
Ví dụ:
var d = new Date();Sun Sep 15 2019 09:06:32 GMT+0700 (Indochina Time)
See the Pen javascript date example by QUANG (@QUANGPHUONG) on CodePen.
b. new Date(year, month, …)
new Date(year, month, day, hour, minute, second, and millisecond) tạo new date object với thời gian xác định cụ thể.
Ví dụ:
var d = new Date(2018, 11, 24, 10, 33, 30, 0);See the Pen javascript specified date time by QUANG (@QUANGPHUONG) on CodePen.
Lưu ý: JavaScript đếm tháng từ số 0 đến 11.
January là 0.
December là 11.
c. new Date(dateString)
new Date(dateString) tạo new date object từ một date string:
Ví dụ:
var d = new Date("October 13, 2014 11:13:00");See the Pen javascript new date string by QUANG (@QUANGPHUONG) on CodePen.
d. new Date(milliseconds)
JavaScript lưu trữ giá trị ngày (date) theo đơn vị milliseconds kể từ ngày 1 tháng 1 năm 1970, 00:00:00 UTC (Universal Time Coordinated).
Zero time = January 01, 1970 00:00:00 UTC.
Ví dụ:
var d = new Date(0);See the Pen javascript new date millisecond by QUANG (@QUANGPHUONG) on CodePen.
II. Javascript Date Methods
Date methods cho phép bạn truy xuất và cài đặt giờ, ngày , tháng, năm… theo giờ địa phương (local time) hoặc giờ UTC / GMT.
1. Hiển thị (display) Date
JavaScript theo mặc định truy xuất giờ, ngày, tháng, năm… theo string format.
Wed Mar 25 2015 07:00:00 GMT+0700 (Indochina Time)
See the Pen javascript display date by QUANG (@QUANGPHUONG) on CodePen.
2. toString()
Javascript tự động chuyển đổi date object sang string khi hiển thị trong HTML, thông qua toString() method.
Ví dụ:
d = new Date();
document.getElementById("demo").innerHTML = d;
Kết quả tương tự với:
d = new Date();
document.getElementById("demo").innerHTML = d.toString();3. toUTCString()
toUTCString() method chuyển đổi date sang UTC string.
Ví dụ:
var d = new Date();
document.getElementById("demo").innerHTML = d.toUTCString();See the Pen javascript date UTC string by QUANG (@QUANGPHUONG) on CodePen.
4. toDateString()
toDateString() method chuyển đổi date sang format dễ hiển nhìn hơn:
Ví dụ:
var d = new Date();
document.getElementById("demo").innerHTML = d.toDateString();See the Pen javascript toDateString by QUANG (@QUANGPHUONG) on CodePen.
III. JavaScript Date Formats
1. JavaScript Date Input
Có 3 loại JavaScript date input formats:
| Type | Example |
|---|---|
| ISO Date | “2015-03-25” (The International Standard) |
| Short Date | “03/25/2015” |
| Long Date | “Mar 25 2015” or “25 Mar 2015” |
2. JavaScript Date Output
JavaScript theo mặc định truy xuất giờ, ngày, tháng, năm… theo string format.
Wed Mar 25 2015 07:00:00 GMT+0700 (Indochina Time)3. JavaScript ISO Dates
Định dạng của date theo tiêu chuẩn ISO 8601 là: YYYY-MM-DD
Ví dụ:
var d = new Date("2015-03-25");See the Pen javascript iso date by QUANG (@QUANGPHUONG) on CodePen.
ISO dates có thể được viết theo định dạng: YYYY-MM-DDTHH:MM:SSZ
Date và time được ngăn cách bởi chữ T.
UTC time được khai báo với chữ Z.
Ví dụ:
var d = new Date("2015-03-25T12:00:00Z");See the Pen javascript iso date time by QUANG (@QUANGPHUONG) on CodePen.
4. Time Zones
Khi cài đặt hoặc truy xuất ngày tháng, nếu time zone không xác định thì Javascript sẽ tự động sử dụng time zone của trình duyệt.
Ví dụ: nếu date/time được tạo theo giờ GMT (Greenwich Mean Time), date/time đó sẽ được tự động chuyển đổi qua CDT (Central US Daylight Time) nếu user truy cập website đến từ central US.
5. JavaScript Short Dates
Cú pháp của short dates như sau: MM/DD/YYYY.
Ví dụ:
var d = new Date("03/25/2015");See the Pen javascript short date by QUANG (@QUANGPHUONG) on CodePen.
6. JavaScript Long Dates
Cú pháp của long dates như sau: MMM DD YYYY.
Ví dụ:
var d = new Date("Mar 25 2015");See the Pen javascript long date by QUANG (@QUANGPHUONG) on CodePen.
Tháng và ngày có thể thay đổi thứ tự trước sau:
Ví dụ:
var d = new Date("25 Mar 2015");Tháng có thể viết dạng đầy đủ (thí dụ: January), hoặc ngắn gọn (thí dụ: Jan):
Ví dụ:
var d = new Date("January 25 2015");Dấu phẩy không quan trọng. Tên tháng có thể viết thường hoặc viết Hoa (case insensitive).
Ví dụ:
var d = new Date("JANUARY, 25, 2015");7. Date Input – Parsing Dates
Date.parse() chuyển đổi ngày tháng sang giá trị milliseconds tính từ ngày 1/1/1970:
Ví dụ:
var msec = Date.parse("March 21, 2012");
document.getElementById("demo").innerHTML = msec;See the Pen javascript date parse by QUANG (@QUANGPHUONG) on CodePen.
Date() dùng để chuyển đổi từ milliseconds sang date object:
Ví dụ:
var msec = Date.parse("March 21, 2012");
var d = new Date(msec);
document.getElementById("demo").innerHTML = d;See the Pen javascript parse milliseconds to date by QUANG (@QUANGPHUONG) on CodePen.
IV. JavaScript Get Date Methods
Các methods có thể sử dụng để truy xuất thông tin từ một date object:
| Method | Description |
|---|---|
| getFullYear() | Get the year as a four digit number (yyyy) |
| getMonth() | Get the month as a number (0-11) |
| getDate() | Get the day as a number (1-31) |
| getHours() | Get the hour (0-23) |
| getMinutes() | Get the minute (0-59) |
| getSeconds() | Get the second (0-59) |
| getMilliseconds() | Get the millisecond (0-999) |
| getTime() | Get the time (milliseconds since January 1, 1970) |
| getDay() | Get the weekday as a number (0-6) |
| Date.now() | Get the time. ECMAScript 5. |
1. getTime() Method
getTime() method trả về giá trị milliseconds kể từ January 1, 1970:
Ví dụ:
var d = new Date();
document.getElementById("demo").innerHTML = d.getTime();See the Pen javascript get time by QUANG (@QUANGPHUONG) on CodePen.
2. getFullYear() Method
getFullYear() method trả về giá trị năm (year) với 4 con số:
Ví dụ:
var d = new Date();
document.getElementById("demo").innerHTML = d.getFullYear();See the Pen javascript getFullYear by QUANG (@QUANGPHUONG) on CodePen.
3. getMonth() Method
getMonth() method trả về giá trị tháng (month) từ theo thứ tự từ 0-11:
Ví dụ:
var d = new Date();
document.getElementById("demo").innerHTML = d.getMonth();See the Pen javascript getMonth by QUANG (@QUANGPHUONG) on CodePen.
Trong JavaScript, tháng đầu tiên (January) bắt đầu từ số 0, tháng cuối cùng (December) có giá trị là 11.
You can use an array of names, and getMonth() to return the month as a name:
4. getDate() Method
getDate() method trả về giá trị ngày (day) từ (1-31):
Ví dụ:
var d = new Date();
document.getElementById("demo").innerHTML = d.getDate();5. getHours() Method
getHours() method trả về giá trị giờ (hour) từ (0-23):
Ví dụ:
var d = new Date();
document.getElementById("demo").innerHTML = d.getHours();6. getMinutes() Method
getMinutes() method trả về giá trị phút (minute) từ (0-59):
Ví dụ:
var d = new Date();
document.getElementById("demo").innerHTML = d.getMinutes();7. getSeconds() Method
getSeconds() method trả về giá trị giây (second) từ (0-59):
Ví dụ:
var d = new Date();
document.getElementById("demo").innerHTML = d.getSeconds();8. getMilliseconds() Method
getMilliseconds() method trả về giá trị milliseconds từ (0-999):
Ví dụ:
var d = new Date();
document.getElementById("demo").innerHTML = d.getMilliseconds();9. getDay() Method
getDay() method trả về giá trị thứ (weekday) trong tuần từ (0-6):
Ví dụ:
var d = new Date();
document.getElementById("demo").innerHTML = d.getDay();Trong JavaScript, ngày đầu tiên của 1 tuần là Chủ Nhật (Sunday) có giá trị là 0, thứ Hai là 1, v.v…
10. UTC Date Methods
UTC date methods sử dụng để làm việc với ngày tháng theo định dạng UTC (Universal Time Zone dates):
| Method | Description |
|---|---|
| getUTCDate() | Same as getDate(), but returns the UTC date |
| getUTCDay() | Same as getDay(), but returns the UTC day |
| getUTCFullYear() | Same as getFullYear(), but returns the UTC year |
| getUTCHours() | Same as getHours(), but returns the UTC hour |
| getUTCMilliseconds() | Same as getMilliseconds(), but returns the UTC milliseconds |
| getUTCMinutes() | Same as getMinutes(), but returns the UTC minutes |
| getUTCMonth() | Same as getMonth(), but returns the UTC month |
| getUTCSeconds() | Same as getSeconds(), but returns the UTC seconds |
V. JavaScript Set Date Methods
Set Date methods dùng để cài đặt ngày tháng theo định dạng : years, months, days, hours, minutes, seconds, milliseconds.
1. Set Date Methods
Các Set Date methods được sử dụng để cài đặt ngày, tháng, năm, giờ, phút, giây:
| Method | Description |
|---|---|
| setDate() | Set the day as a number (1-31) |
| setFullYear() | Set the year (optionally month and day) |
| setHours() | Set the hour (0-23) |
| setMilliseconds() | Set the milliseconds (0-999) |
| setMinutes() | Set the minutes (0-59) |
| setMonth() | Set the month (0-11) |
| setSeconds() | Set the seconds (0-59) |
| setTime() | Set the time (milliseconds since January 1, 1970) |
2. setFullYear() Method
setFullYear() method cài đặt năm của một date object:
Ví dụ:
<script>
var d = new Date();
d.setFullYear(2020);
document.getElementById("demo").innerHTML = d;
</script>See the Pen javascript setFullYear by QUANG (@QUANGPHUONG) on CodePen.
setFullYear() method cài đặt ngày, tháng, năm:
Ví dụ:
<script>
var d = new Date();
d.setFullYear(2020, 11, 3);
document.getElementById("demo").innerHTML = d;
</script>3. setMonth() Method
setMonth() method cài đặt tháng của một date object (0-11):
Ví dụ:
<script>
var d = new Date();
d.setMonth(11);
document.getElementById("demo").innerHTML = d;
</script>4. setDate() Method
setDate() method cài đặt ngày của một date object (1-31):
Ví dụ:
<script>
var d = new Date();
d.setDate(15);
document.getElementById("demo").innerHTML = d;
</script>setDate() method có thể cộng thêm ngày (add days):
Ví dụ:
<script>
var d = new Date();
d.setDate(d.getDate() + 50);
document.getElementById("demo").innerHTML = d;
</script>5. The setHours() Method
The setHours() method cài đặt giờ (hour) giá trị từ (0-23):
Ví dụ:
<script>
var d = new Date();
d.setHours(22);
document.getElementById("demo").innerHTML = d;
</script>6. The setMinutes() Method
setMinutes() method cài đặt giá trị phút (minute) từ (0-59):
Ví dụ:
<script>
var d = new Date();
d.setMinutes(30);
document.getElementById("demo").innerHTML = d;
</script>7. The setSeconds() Method
setSeconds() method cài đặt giây (second) giá trị từ (0-59):
Ví dụ:
<script>
var d = new Date();
d.setSeconds(30);
document.getElementById("demo").innerHTML = d;
</script>8. Compare Dates
Trong Javascript, ngày tháng có thể so sánh được.
Ví dụ:
var today, someday, text;
today = new Date();
someday = new Date();
someday.setFullYear(2100, 0, 14);if (someday > today) {
text = "Today is before January 14, 2100.";
} else {
text = "Today is after January 14, 2100.";
}
document.getElementById("demo").innerHTML = text;See the Pen javascript compare dates by QUANG (@QUANGPHUONG) on CodePen.
Nguồn tham khảo: w3school
*************
Xem thêm:
- Lập trình web là gì?
- HTML là gì?
- Học lập trình web bắt đầu như thế nào?
- Bài 1 | Xây dựng trang web đơn giản với HTML
- Bài 2 | Các thành phần cơ bản của HTML
- Bài 3 | HTML style – Định dạng nội dung trang web
- Bài 4 | CSS style – Định dạng nội dung trang web
- Bài 5 | HTML Table và List – Định dạng bảng và list trong trang web
- Bài 6 | HTML Block, Inline, ID, Class và Iframes Elements
- Bài 7 | HTML Form Elements – Nhập dữ liệu cho Web
- Bài 8 | HTML Input Elements – Nhập dữ liệu cho Web
- Bài 9 | Tạo responsive web layout bằng HTML và CSS
- Bài 10 | CSS là gì? Thiết kế Web nâng cao bằng CSS
- Bài 11 | CSS Background và Border
- Bài 12 | CSS Margin và Padding
- Bài 13 | CSS Box Model trong thiết kế Website
- Bài 14 | CSS Text, List và Table
- Bài 15 | CSS Display, Overflow, Float và Alignment
- Bài 16 | CSS Combinator
- Bài 17 | CSS Navigation Bar
- Bài 18 | Responsive Web Layout với CSS
- Bài 19 | CSS Animation
- Bài 20 | jQuery là gì? jQuery Selectors & Event Methods
- Bài 21 | jQuery Animate – Effects & Animation
- Bài 22 | jQuery CSS
- Bài 23 | jQuery Traversing
- Bài 24 | Javascript là gì?- Giới thiệu về Javascript
- Bài 25 | Lập trình Javascript cơ bản (Phần 1)
- Bài 26 | Javascript function là gì? Lập trình Javascript cơ bản (Phần 2)
- Bài 27 | Javascript Data Types – Lập trình Javascript cơ bản (Phần 3)
—————————————————————————————
SOGO – xSchool
Đối tác của trường Đại học trực tuyến FUNiX (thuộc khối giáo dục FPT Education).
SOGO hợp tác cùng FUNiX triển khai chương trình đào tạo Lập trình viên chuyên nghiệp – Java Developer dựa trên cơ sở hoàn thành 03 chứng chỉ đầu tiên của chương trình Cử nhân Đại học trực tuyến FUNiX (tổng cộng 8 Chứng chỉ để lấy bằng Đại học FPT).
Mục tiêu của chương trình này là giúp sinh viên có thể hoàn thành 3 chứng chỉ đầu trong thời gian từ 10 – 12 tháng và có thể đi làm ngay tại FPT Software với chức danh Java Developer Fresher.
Sau khi đi làm, sinh viên vẫn có thể tiếp tục học để hoàn thành 5 chứng chỉ còn lại của FUNiX và lấy bằng Đại học FPT (được Bộ giáo dục và đào tạo công nhận).
Chi tiết chương trình trở thành Java Developer chỉ trong 10 tháng.
Liên hệ ngay để biết thêm chi tiết đây:
Hotline: 0355 00 77 38
Facebook (SOGO xSchool): sogoxschool
Tag:date.now, dateString, getDate, getDay, getFullYear, getHours, getMiliseconds, getMinutes, getMonth, getSeconds, getTime, ISO Date, Javascript, javascript date, lap trinh web, long date, parse date, setDate, setFullYear, setHours, setMiliseconds, setMinutes, setMonth, setSeconds, setTime, short date, sogo xschool, thiet ke web, toDateString, toString, web developer
Bạn cũng có thể thích
Bài 34 | JSON là gì? – Javascript cơ bản (Phần 10) – SOGO
Bài 33 | Javascript DOM là gì? – Javascript cơ bản (Phần 9) – SOGO
