Định dạng ngày tháng trong Javascript không sử dụng thư viện

Trong các ứng dụng/trang web, chúng ta thường muốn hiển thị định dạng ngày tháng kiểu 18/06/2021 hay 2021/06/18 … cùng với thời gian (giờ, phút, giây…) Thông thường chúng ta sẽ sử dụng luôn các thư viện như day.js, moment.js … để xử lý cho nó vuông. Nhưng việc cài thêm thư viện để

Trong các ứng dụng/trang web, chúng ta thường muốn hiển thị định dạng ngày tháng kiểu 18/06/2021 hay 2021/06/18 … cùng với thời gian (giờ, phút, giây…)

Thông thường chúng ta sẽ sử dụng luôn các thư viện như day.js, moment.js … để xử lý cho nó vuông.

Nhưng việc cài thêm thư viện để sử dụng mà không sử dụng hết tính năng của nó thì khá là phí, mà còn làm cho ứng dụng của chúng ta nặng hơn.

Vì vậy, khi chúng ta sử dụng với tần suất thấp thì không cần phải cài thêm thư viện, vì nó sẽ ảnh hưởng tới thời gian tải ứng dụng, không nhiều thì ít :v

Trong bài viết này, chúng ta sẽ cùng học cách sử dụng Date object để định dạng ngày theo mà không sử dụng bất kỳ thư viện bên ngoài nào.

Sử dụng Date.prototype.toLocaleDateString

Syntax:

toLocaleDateString(locales, options)

Phương thức toLocaleDateString nhận một bộ các tùy chọn tùy chỉnh và trả về phần ngày dưới dạng Date instance theo quy ước ngôn ngữ được xác định. Ngôn ngữ xác định thông qua IETF language tag , ví dụ en-US …

options là một đối tượng mà chúng ta chỉ định phần nào của ngày mà chúng ta muốn như ngày, năm, tháng, v.v.

Tham khảo:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString

Chỉ lấy ngày

const date =newDate().toLocaleDateString('en-US');
console.log(date);// 6/18/2021

Định dạng ngày

const date =newDate().toLocaleDateString('en-US',{
    year:'numeric',
    month:'long',
    day:'numeric'});
console.log(date);// June 18, 2021

Lấy ngày và giờ

const date =newDate().toLocaleDateString('en-US',{
    hour:'numeric',
    minute:'numeric'});
console.log(date);// 6/18/2021, 10:30 AM

Định dạng ngày và giờ

const date =newDate().toLocaleDateString('en-US',{
    year:'numeric',
    month:'long',
    day:'numeric',
    hour:'numeric',
    minute:'numeric'});
console.log(date);// June 18, 2021, 10:30 AM

Định dạng ngày, giờ và giây

const date =newDate().toLocaleDateString('en-US',{
    year:'numeric',
    month:'long',
    day:'numeric',
    hour:'numeric',
    minute:'numeric',
    second:'numeric'});
console.log(date);// June 18, 2021, 10:30:54 AM

Định dạng ngày, giờ và tuần

const date =newDate().toLocaleDateString('en-US',{
    weekday:'long',
    year:'numeric',
    month:'long',
    day:'numeric',
    hour:'numeric',
    minute:'numeric',
    second:'numeric'});
console.log(date);// Friday, June 18, 2021, 10:30:52 AM

Các tham số tùy chọn có thể sử dụng:

weekday: long, short, narrow
era: long, short, narrow
year: numeric, 2-digit
month: numeric, 2-digit, long, short, narrow
day: numeric, 2-digit
hour: numeric, 2-digit
minute: numeric, 2-digit
second: numeric, 2-digit
timeZoneName: long, short

Cảm ơn mọi người đã dành thời gian học cùng mình 😘

Nguồn nè:https://dev.to/myogeshchavan97/how-to-display-formatted-date-in-javascript-without-using-any-external-library-1n2m

Nguồn: viblo.asia

Bài viết liên quan

So sánh Webhook và API: Khi nào nên sử dụng?

Trong lĩnh vực công nghệ thông tin và phát triển phần mềm, Webhook và API là hai th

Những ngành nghề AI có thể thay thế dần trong tương lai.

Những ngành nghề AI có thể thay thế trong tương lai gần Dựa trên các báo cáo và

Tạo Subdomain miễn phí với is-a.dev 🤪

Cuối tuần mọi người thế nào, mình thì rảnh quá lướt Facebook, tớ tình cờ th

Dùng TailwindCSS v4 trong SpringBoot + JTE

Giới thiệu JTE là gì? JTE (Java Template Engine) là một template engine an toàn, nhẹ và