Cách quản lý ngày tháng và thời gian trong React bằng Moment.js

Moment.js là một thư viện tuyệt vời trong việc quản lý ngày tháng và thời gian hiệu quả trong ứng dụng tạo bằng ReactJS. Dưới đây là hướng dẫn chi tiết.

Quản lý ngày tháng & thời gian trong React có thể là một thử thách với người mới bắt đầu công việc này. Thật may, hiện có một số thư viện giúp bạn quản lý ngày tháng và thời gian trong React. Một trong số đó là Moment.js.

Moment.js là một thư viện gọn nhẹ, mang tới giải pháp đơn giản để thao tác và định dạng ngày tháng & thời gian 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 hoạt động ngày tháng & thời gian trong JavaScript. Cài đặt thư viện Moment.js là bước đầu tiên để dùng nó ở app React. Bạn có thể làm việc này bằng cách chạy lệnh sau trong terminal.

npm install moment

Sau khi cài đặt hoàn tất, bạn có thể dùng Moment.js trong phần tử React.

Dùng Moment.js để hiện ngày tháng và thời gian

Bạn có thể dùng Moment.js để hiện ngày tháng và thời gian ở định dạng cụ thể trong app React. Để dùng thư viện này, nhập import moment từ gói được 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

Phương thức moment() tạo một đối tượng moment mới, đại diện cho một điểm thời gian cụ thể. Phương thức format() định dạng một đối tượng moment dưới dạng chuỗi.

Phương thức format() lấy đối số chuỗi xác định định dạng mong muốn cho đối tượng moment. Đối số chuỗi có thể bao gồm một kết hợp chữ cái và ký tự đặc biệt. Mỗi ký tự đều có một ý nghĩa riêng.

Ví dụ một số ký tự đặc biệt:

• 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ữ
• DD: Ngày trong tháng có hai chữ số
• D: Ngày trong tháng có một hoặc hai chữ số
• Do: Ngày trong tháng với thứ tự
• HH: Giờ có hai chữ số
• H: Giờ có một hoặc hai chữ số
• mm: Phút có hai chữ số
• m: Phút có một hoặc hai chữ số
• ss: Số giây có hai chữ số
• s: Số giây có một hoặc hai chữ số

Khi phần tử App ở khối code trước đó được xuất, ngày tháng & thời gian hiện tại sẽ hiện ở định dạng được chỉ định trên màn hình.

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

Ví dụ:

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

Dùng Moment.js để thao tác ngày và thời gian

Thư viện Moment.js cũng cung cấp một số phương thức để thao tác ngáy tháng và thời gian. Chúng cho phép bạn thêm hoặc trừ các khoảng thời gian, đặt giá trị cụ thể cho các phần tử ngày và giờ, thực hiện những hoạt động có thể á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

Ở ví dụ này, bạn khai báo các biến JavaScript sau: tomorrow, time, lastYear, và hour. 4 biến này dùng các phương thức khác nhau của thư viện Moment.js để thao tác ngày tháng và thời gian.

Biến tomorrow dùng phương thức add() để thêm một ngày vào ngày hiện tại. Add() thêm thời gian vào đối tượng Moment. Hàm này tính hai đối số: giá trị thời gian và chuỗi đại diện cho đơn vị thời gian được thêm. Đơn vị có thể là years, months, weeks, days, hours, minutes và seconds.

Bạn cũng có thể lùi thời gian bằng subtract(). Trong trường hợp này, biến time dùng subtract() để trừ 1 tiếng từ thời gian hiện tại.

Dùng phương thức set(), biến Last year đặt năm sang 2022 và tháng sang tháng 2. set() gắn một đơn vị thời gian cụ thể cho đối tượng Moment.

Với phương thức get(), bạn có thể truy xuất một thời gian cụ thể. Get() tính một đối số - đơn vị thời gian.

Dùng Moment.js để phân tích ngày và giờ

Tính năng hữu ích khác của Moment.js là khả năng phân tích ngày tháng và thời gian 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 tháng hoặc thời gian từ một chuỗi, bạn cần dùng moment(). Ở đây, moment() tính hai đối số, chuỗi ngày tháng và chuỗi định dạng.

Ví dụ về cách dùng moment() để phân tích ngày và giờ:

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 code trên, moment() sẽ phân tích chuỗi này ‘2920130000’ bằng chuỗi định dạng "Do-MMMM-YYYY". toDate() chuyển đổi đối tượng moment thành một đối tượng ngày tháng JavaScript chuẩn.

toDate() không nhận đối số và trả về đối tượng JavaScript Date đại diện cho cùng ngày và giờ giống đối tượng moment.

Nhìn chung, Moment.js là một thư viện mạnh mẽ, cung cấp cách đơn giản để thao tác và định dạng ngày, thời gian trong JavaScript. Hi vọng bài viết hữu ích với các bạn.