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

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

Quản lý ngày giờ là rất quan trọng đối với bất kỳ ứng dụng nào và React cũng không ngoại lệ. Mặc dù JavaScript cung cấp các chức năng thao tác ngày và giờ tích hợp sẵn, nhưng chúng có thể cồng kềnh. May mắn thay, nhiều thư viện của bên thứ ba có thể đơn giản hóa việc quản lý ngày và giờ trong React. Một thư viện như vậy là Day.js.


Day.js là một thư viện nhẹ để phân tích cú pháp, xác thực, thao tác và định dạng ngày và giờ trong JavaScript.


Cài đặt Day.js

Thư viện Day.js là một giải pháp thay thế hiện đại cho Moment.js, một thư viện khác được sử dụng để xử lý ngày và giờ. Day.js cung cấp một API tương tự với dung lượng nhỏ hơn và hiệu suất nhanh hơn.

Để sử dụng Day.js trong ứng dụng React của bạn, trước tiên bạn cần cài đặt 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 dayjs

Phân tích cú pháp và định dạng ngày và giờ

Day.js cung cấp một API đơn giản để phân tích cú pháp và định dạng ngày. Bạn có thể lấy ngày và giờ bằng cách sử dụng dayjs() nhưng trước tiên, bạn cần nhập nó từ thư viện Day.js.

Ví dụ:

 import React from 'react';
import dayjs from 'dayjs';

function App() {

  const date = dayjs();
  console.log(date);

  return (
    <div>
      <p>Date and Time Management</p>
    </div>
  )
}

export default App

Các dayjs() phương thức tạo một đối tượng Day.js mới đại diện cho một ngày và giờ cụ thể. Trong ví dụ trên, các dayjs() phương thức tạo một đối tượng Day.js đại diện cho ngày và giờ hiện tại.

Trong bảng điều khiển của bạn, đối tượng Day.js sẽ trông như thế này:

nhật ký giao diện điều khiển của đối tượng day.js

Các dayjs() phương thức chấp nhận một đối số ngày tùy chọn có thể là một chuỗi, một số (dấu thời gian Unix), một đối tượng Ngày JavaScript hoặc một đối tượng Day.js khác. Phương thức này sẽ tạo đối tượng Day.js đại diện cho đối số ngày được chỉ định.

Ví dụ:

 import React from 'react';
import dayjs from 'dayjs';

function App() {

  const date = dayjs('2023-05-01');
  console.log(date);

  const unixDate = dayjs(1651382400000);
  console.log(unixDate);

  return (
    <div>
      <p>Date and Time Management</p>
    </div>
  )
}

export default App

Đầu ra của đối tượng Day.js của khối mã này sẽ tương tự như khối mã trước nhưng sẽ có các giá trị thuộc tính khác nhau.

Để hiển thị ngày được tạo dưới dạng đối tượng Day.js, bạn cần sử dụng định dạng() phương pháp. Các định dạng() phương thức của thư viện Day.js cho phép bạn định dạng một đối tượng Day.js dưới dạng một chuỗi theo một chuỗi định dạng cụ thể.

Phương thức lấy một chuỗi định dạng làm đối số của nó. Đố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ể,

Ví dụ:

 import React from 'react';
import dayjs from 'dayjs';

function App() {

  const date = dayjs('2023-05-01').format('dddd, MMMM D, YYYY');
  const time = dayjs().format('HH:mm:ss');
  const unixDate = dayjs(1651382400000).format('MM/DD/YY');

  return (
    <div>
      <p>{date}</p>
      <p>{unixDate}</p>
     <p>{time}</p>
    </div>
  )
}

export default App

Các ngày biến sẽ hiển thị ngày ở định dạng này ‘Wednesday, April 26, 2023’. Chuỗi định dạng là ‘dddd, MMMM D, YYYY’ Ở đâu đdd là ngày trong tuần, MMMM là tháng trong lời nói, Đ. là ngày trong tháng bằng một hoặc hai chữ số và YYYY là năm có bốn chữ số.

Các unixDate biến được định dạng dưới dạng chuỗi bằng cách sử dụng chuỗi định dạng ‘MM/DD/YYYY,’ đại diện cho tháng bằng hai chữ số, ngày trong tháng bằng hai chữ số và năm bằng bốn chữ số.

Các thời gian biến hiển thị thời gian hiện tại ở định dạng được chỉ định. Chuỗi định dạng là ‘HH:mm:ss’ ở đâu hộ đại diện cho giờ, mm đại diện cho phút, và ss đại diện cho giây.

Thao túng ngày và giờ

Day.js cung cấp nhiều phương thức giúp dễ dàng thao tác ngày và giờ. Bạn có thể tham khảo tài liệu chính thức của Day.js để có danh sách đầy đủ các phương pháp có sẵn để thao tác ngày và giờ.

Ví dụ:

 import React from 'react';
import dayjs from 'dayjs';

function App() {

  const date = dayjs().add(7,'days').format('dddd, MMMM D, YYYY');
  const time = dayjs().subtract(2, 'hours').format('HH:mm:ss');

  return (
    <div>
      <p>{date}</p>
      <p>{time}</p>
    </div>
  )
}

export default App

Khối mã trên sử dụng thêm vào() phương pháp thêm 7 ngày vào ngày hiện tại. Các thêm vào() phương thức cho phép bạn thêm một khoảng thời gian xác định vào đối tượng Day.js. Phương thức này có hai đối số, lượng thời gian để cộng các số và đơn vị thời gian để cộng.

với trừ () phương pháp, bạn có thể trừ một khoảng thời gian xác định từ Day.js sự vật. Các thời gian biến trừ 2 giờ kể từ thời điểm hiện tại bằng cách sử dụng trừ () phương pháp.

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

Day.js cung cấp một số phương thức bao gồm từ giờ(), toNow(), ĐẾN()từ() để hiển thị thời gian tương đối, chẳng hạn như “2 giờ trước” hoặc “trong 3 ngày”. Để sử dụng các phương pháp này, hãy nhập tệp thời gian tương đối plugin từ dayjs/plugin/thời gian tương đối trong ứng dụng React của bạn.

Ví dụ:

 import React from 'react';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';

function App() {

  dayjs.extend(relativeTime);
  
  const date = dayjs().add(7, 'days')
  const relativeDate = date.fromNow();

  const date2 = dayjs().subtract(2, 'hours');
  const relativeDate2 = date2.toNow();

  const lastYear = dayjs().subtract(1, 'year');
  const diff = date.from(lastYear);
  const diff2 = date.to(lastYear)

  return (
    <div>
      <p>{ relativeDate }</p>
      <p>{ relativeDate2 }</p>
      <p>{ diff }</p>
      <p>{ diff2 }</p>
    </div>
  )
}

export default App

Các từ giờ() chức năng hiển thị một chuỗi thời gian tương đối thể hiện sự khác biệt giữa thời gian hiện tại và một ngày cụ thể. Trong ví dụ này, các từ giờ() hiển thị sự khác biệt giữa ngày và thời điểm hiện tại.

Các toNow() chức năng tương tự như từ giờ() ở chỗ nó hiển thị một chuỗi đại diện cho sự khác biệt giữa một ngày cụ thể và thời gian hiện tại. Khi bạn gọi toNow() hàm, nó trả về một chuỗi thời gian tương đối với thời gian hiện tại.

Cuối cùng, sử dụng từ()ĐẾN() chức năng, bạn có thể hiển thị một chuỗi thời gian tương đối thể hiện sự khác biệt giữa hai ngày được chỉ định. Trong ví dụ này, bạn nhận được sự khác biệt giữa năm ngoáingày sử dụng từ()ĐẾN() chức năng.

Lưu ý, bạn cũng có thể chuyển một đối số boolean tùy chọn cho từ giờ(), toNow(), từ()ĐẾN() các phương thức để chỉ định có bao gồm hoặc loại trừ hậu tố hay không (ví dụ: “ago” hoặc “in”).

Ví dụ:

 const date = dayjs().add(7, 'days')
const relativeDate = date.fromNow(true);

const date2 = dayjs().subtract(2, 'hours');
const relativeDate2 = date2.toNow(true);

const lastYear = dayjs().subtract(1, 'year');
const diff = date.from(lastYear, true)
const diff2 = date.to(lastYear, true)

Đi qua SAI đối số sẽ hiển thị ngày có hậu tố.

Quản lý ngày giờ hiệu quả

Quản lý ngày và giờ là một khía cạnh quan trọng của bất kỳ ứng dụng nào và Day.js cung cấp một thư viện linh hoạt và dễ sử dụng để xử lý các hoạt động này trong ứng dụng React. Bằng cách kết hợp Day.js vào dự án của mình, bạn có thể dễ dàng định dạng ngày và giờ, phân tích chuỗi và thao tác thời lượng.

Ngoài ra, Day.js cung cấp một loạt plugin để mở rộng chức năng của nó và làm cho nó thậm chí còn mạnh mẽ hơn. Cho dù bạn đang xây dựng một lịch đơn giản hay một hệ thống lên lịch phức tạp, Day.js là một lựa chọn tuyệt vời để quản lý ngày và giờ trong ứng dụng React của bạn.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *