Cách xử lý quản lý ngày và giờ trong React bằng Moment.js

Quản lý ngày và giờ trong React có thể là một thách thức đối với những người chưa quen thuộc với lĩnh vực này. May mắn thay, có một số thư viện có thể giúp bạn quản lý ngày giờ trong React. Một trong những thư viện này là Moment.js.

Moment.js là một thư viện nhẹ với cách đơn giản để thao tác và định dạng ngày và giờ trong JavaScript.

Cài đặt thư viện Moment.js

Thư viện Moment.js là một gói để quản lý các thao tác ngày và giờ trong JavaScript. Cài đặt thư viện Moment.js là bước đầu tiên để sử dụng Moment.js trong ứng dụng React của bạn. Bạn có thể làm điều này bằng cách chạy lệnh sau trong thiết bị đầu cuối của mình:

 npm install moment
 

Khi quá trình cài đặt hoàn tất, bạn có thể sử dụng Moment.js trong thành phần React của mình.

Sử dụng Moment.js để hiển thị ngày và giờ

Bạn có thể sử dụng Moment.js để hiển thị ngày và giờ ở một định dạng cụ thể trong ứng dụng React của mình. Để sử dụng thư viện, hãy nhập chốc lát từ gói đã cài đặt.

 import React from 'react';
import moment from 'moment';
function App() {
  const date = moment().format("MMMM DD YYYY");
  const time = moment().format("HH mm ss");
  return (
    <div>
      <p> Today's date is { date } </p>
      <p> The time is { time } </p>
    </div>
  )
}
export default App
 

Các chốc lát() phương thức tạo một đối tượng thời điểm mới đại diện cho một thời điểm cụ thể. Các định dạng() phương thức định dạng đối tượng khoảnh khắc thành biểu diễn chuỗi.

Các định dạng() phương thức nhận một đối số chuỗi chỉ định định dạng mong muốn cho đối tượng thời điểm. Đối số chuỗi có thể bao gồm tổ hợp các chữ cái và ký tự đặc biệt, mỗi ký tự có một ý nghĩa cụ thể.

Một số ký tự đặc biệt này là:

• YYYY: Năm có bốn chữ số
• YY: Năm có hai chữ số
• MM: Tháng có hai chữ số
• m: Tháng có một hoặc hai chữ số
• MMMM: Tháng bằng chữ
• ĐĐ: Ngày trong tháng có hai chữ số
• Đ.: Ngày trong tháng có một hoặc hai chữ số
• LÀM: Ngày trong tháng với thứ tự
• hộ: Giờ có hai chữ số
• h: Giờ có một hoặc hai chữ số
• mm: Phút có hai chữ số
• tôi: Phút có một hoặc hai chữ số
• ss: Thứ hai có hai chữ số
• S: Thứ hai với một hoặc hai chữ số

Khi mà Ứng dụng thành phần trong khối mã trước đó được hiển thị, ngày và giờ hiện tại được hiển thị ở định dạng được chỉ định trên màn hình.

Các chốc lát() phương thức có thể lấy một đối số ngày hoặc giờ chuỗi. Khi mà chốc lát() phương thức có một đối số ngày hoặc giờ chuỗi, nó tạo một đối tượng thời điểm đại diện cho ngày hoặc giờ đó. Chuỗi có thể ở nhiều định dạng khác nhau, chẳng hạn như dấu thời gian ISO 8601, RFC 2822 hoặc Unix.

Ví dụ:

 const date = moment('1998-06-23').format("MMMM DD YYYY");
 

Sử dụng Moment.js để thao tác ngày và giờ

Thư viện Moment.js cũng cung cấp một số phương thức để thao tác ngày và giờ. Các phương pháp này cho phép bạn cộng hoặc trừ các khoảng thời gian, đặt các giá trị cụ thể cho các thành phần ngày và giờ cũng như thực hiện các thao tác áp dụng khác.

Ví dụ:

 import React from 'react';
import moment from 'moment';
function App() {
  const tomorrow = moment().add(1, 'day').format("Do MMMM,YYYY");
  const time = moment().subtract(1, 'hour').format("HH:mm:ss");
  const lastYear = moment().set('year', 2022).set('month', 1).format("Do MMMM,YYYY");
  const hour = moment().get('hour');
  return (
    <div className="App">
      <p>Tomorrow's date is { tomorrow }</p>
      <p>This was the time: { time }, an hour ago</p>
      <p>{ lastYear }</p>
      <p>{ hour }</p>
    </div>
  )
}
export default App
 

Trong ví dụ này, bạn khai báo các biến JavaScript sau: Ngày mai, thời gian, năm ngoáiVà giờ. Bốn biến này sử dụng các phương thức khác nhau của thư viện Moment.js để thao tác ngày và giờ.

Các Ngày mai biến sử dụng thêm vào() phương pháp để thêm một ngày vào ngày hiện tại. Các thêm vào() phương thức thêm thời gian vào một đối tượng Moment nhất định. Hàm nhận hai đối số: giá trị thời lượng và chuỗi biểu thị đơn vị thời gian cần thêm. Đơn vị có thể là năm, tháng, tuần, ngày, giờ, phútVà giây.

Bạn cũng có thể trừ thời gian bằng cách sử dụng trừ () phương pháp. Trong trường hợp này, các thời gian biến sử dụng trừ () phương pháp để trừ một giờ từ thời điểm hiện tại.

Sử dụng bộ() phương pháp, các năm ngoái biến đặt năm thành 2022 và tháng thành tháng 2 (vì tháng 1 được biểu thị bằng tháng 0). Các bộ() phương thức gán một đơn vị thời gian cụ thể cho một đối tượng Khoảnh khắc.

với lấy() phương pháp, bạn có thể truy xuất một thời gian cụ thể. Các lấy() phương thức nhận một đối số duy nhất, một đơn vị thời gian.

Sử dụng Moment.js để phân tích ngày và giờ

Một tính năng hữu ích khác của Moment.js là khả năng phân tích ngày và giờ từ các chuỗi. Điều này có thể hữu ích khi làm việc với dữ liệu từ các nguồn bên ngoài.

Để phân tích ngày hoặc giờ từ một chuỗi, bạn cần sử dụng chốc lát() phương pháp. Trong trường hợp này, các chốc lát() phương thức nhận hai đối số, chuỗi ngày và chuỗi định dạng.

Đây là một ví dụ về cách bạn có thể sử dụng chốc lát() phương pháp để phân tích ngày và thời gian:

 import React from 'react';
import moment from 'moment';
function App() {
  const date = moment('2920130000', 'Do-MMMM-YYYY').toDate();
  console.log( date );
  return (
    <div></div>
  )
}
export default App
 

Trong khối mã trên, chốc lát() sẽ phân tích cú pháp chuỗi ‘2920130000’ này bằng cách sử dụng chuỗi định dạng “Do-MMMM-YYYY”. Các toDate() phương thức chuyển đổi đối tượng thời điểm thành đối tượng Ngày JavaScript gốc.

Các toDate() phương thức không có đối số và trả về một đối tượng Ngày JavaScript biểu thị cùng ngày và giờ với đối tượng thời điểm.

Hiển thị thời gian tương đối

Với thư viện Moment.js, bạn có thể định dạng và hiển thị thời gian tương đối. Để làm điều này, bạn sử dụng từ giờ() Và toNow() các phương pháp. Các phương thức này hiển thị thời gian giữa một ngày nhất định và thời gian hiện tại.

Ví dụ:

 import React from 'react';
import moment from 'moment';
function App() {
  const yesterday = moment().subtract(7, 'day');
  const time1 = yesterday.fromNow(); 
  const time2 = yesterday.toNow(); 
  return (
    <div>
     <p>{ time1 }</p>
     <p>{ time2 }</p>
    </div>
  )
}
export default App
 

Trong ví dụ này, các từ giờ() phương thức trả về thời gian tương đối đã trôi qua kể từ ngày được chỉ định, trong khi toNow() phương thức trả về thời gian tương đối cho đến thời điểm hiện tại.

Thêm vào Moment.js

Moment.js là một thư viện mạnh mẽ cung cấp một cách đơn giản để thao tác và định dạng ngày và giờ trong JavaScript. Bạn đã học cách thao tác, hiển thị và phân tích ngày và giờ trong React bằng Moment.js.

Moment.js cung cấp một số phương thức khác, chẳng hạn như local, startOf, endOf, v.v. Tuy nhiên, với thông tin được cung cấp, bạn đã sẵn sàng để bắt đầu sử dụng Moment.js trong ứng dụng React của mình.