Bài 28 | Javascript Date – Javascript cơ bản (Phần 4) – SOGO

javascript date

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();
Kết quả:

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:

  1. Lập trình web là gì?
  2. HTML là gì?
  3. Học lập trình web bắt đầu như thế nào?
  4. Bài 1 | Xây dựng trang web đơn giản với HTML
  5. Bài 2 | Các thành phần cơ bản của HTML
  6. Bài 3 | HTML style – Định dạng nội dung trang web
  7. Bài 4 | CSS style – Định dạng nội dung trang web
  8. Bài 5 | HTML Table và List – Định dạng bảng và list trong trang web
  9. Bài 6 | HTML Block, Inline, ID, Class và Iframes Elements
  10. Bài 7 | HTML Form Elements – Nhập dữ liệu cho Web
  11. Bài 8 | HTML Input Elements – Nhập dữ liệu cho Web
  12. Bài 9 | Tạo responsive web layout bằng HTML và CSS
  13. Bài 10 | CSS là gì? Thiết kế Web nâng cao bằng CSS
  14. Bài 11 | CSS Background và Border
  15. Bài 12 | CSS Margin và Padding
  16. Bài 13 | CSS Box Model trong thiết kế Website
  17. Bài 14 | CSS Text, List và Table
  18. Bài 15 | CSS Display, Overflow, Float và Alignment
  19. Bài 16 | CSS Combinator
  20. Bài 17 | CSS Navigation Bar
  21. Bài 18 | Responsive Web Layout với CSS
  22. Bài 19 | CSS Animation
  23. Bài 20 | jQuery là gì? jQuery Selectors & Event Methods
  24. Bài 21 | jQuery Animate – Effects & Animation
  25. Bài 22 | jQuery CSS
  26. Bài 23 | jQuery Traversing
  27. Bài 24 | Javascript là gì?- Giới thiệu về Javascript
  28. Bài 25 | Lập trình Javascript cơ bản (Phần 1)
  29. Bài 26 | Javascript function là gì? Lập trình Javascript cơ bản (Phần 2)
  30. 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:, , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

admin

Bạn cũng có thể thích

javascript-array (2)
Bài 30 | Javascript Array – Javascript cơ bản (Phần 6) – SOGO
5 Tháng Mười, 2019
javascript-number
Bài 29 | Javascript Number Format – Javascript cơ bản (Phần 5) – SOGO
1 Tháng Mười, 2019
JavaScript-Data-types
Bài 27 | Javascript Data Types – Javascript cơ bản (Phần 3) – SOGO
22 Tháng Chín, 2019

Ý kiến

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *