ReactJS - DatePicker: Hướng dẫn dành cho người mới bắt đầu

Xin chào các bạn nhà phát triển tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của ReactJS Date Pickers. Đừng lo lắng nếu bạn chưa bao giờ viết mã trước đây - tôi sẽ là người hướng dẫn thân thiện của bạn, giải thích mọi thứ từng bước. Cuối cùng của bài hướng dẫn này, bạn sẽ có thể thêm một bộ chọn ngày tiện ích vào ứng dụng React của mình. Hãy cùng bắt đầu!

Date Picker là gì?

Trước khi chúng ta bắt đầu viết mã, hãy hiểu Date Picker là gì. Hãy tưởng tượng bạn đang đặt vé máy bay trực tuyến. Bạn cần chọn ngày đi, phải không? Bộ lịch xuất hiện cho phép bạn chọn ngày? Đó chính là Date Picker! Nó là một yếu tố giao diện người dùng giúp việc chọn ngày trở nên dễ dàng và trực quan.

Tại sao sử dụng Date Picker trong React?

React là về việc tạo ra các giao diện người dùng tương tác, và Date Picker là một ví dụ hoàn hảo. Nó nâng cao trải nghiệm người dùng bằng cách cung cấp một lịch trực quan để chọn ngày, giảm thiểu lỗi và làm cho ứng dụng của bạn thân thiện hơn với người dùng.

Bắt đầu với React Date Picker

Để sử dụng Date Picker trong React, chúng ta sẽ sử dụng một thư viện phổ biến叫做 react-datepicker. Thư viện này cung cấp một thành phần tùy chỉnh mà chúng ta có thể dễ dàng tích hợp vào ứng dụng React của mình.

Bước 1: Thiết lập dự án React của bạn

Đầu tiên, hãy tạo một dự án React mới. Nếu bạn đã có một dự án, bạn có thể bỏ qua bước này.

npx create-react-app my-datepicker-app
cd my-datepicker-app

Lệnh này tạo một ứng dụng React mới có tên "my-datepicker-app" và di chuyển bạn vào thư mục dự án.

Bước 2: Cài đặt thư viện Date Picker

Bây giờ, hãy cài đặt thư viện react-datepicker:

npm install react-datepicker

Lệnh này thêm thư viện chọn ngày vào dự án của bạn.

Áp dụng thành phần Date Picker

Bây giờ đến phần thú vị - thực sự sử dụng bộ chọn ngày trong ứng dụng của chúng ta!

Bước 1: Nhập các mô-đun cần thiết

Mở tệp src/App.js và thêm các câu lệnh nhập sau ở đầu:

import React, { useState } from 'react';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

Dưới đây là giải thích của từng dòng:

• Chúng ta nhập useState từ React để quản lý trạng thái của thành phần.
• Chúng ta nhập thành phần DatePicker từ thư viện mà chúng ta đã cài đặt.
• Chúng ta nhập tệp CSS để định dạng bộ chọn ngày.

Bước 2: Tạo một thành phần hàm

Hãy tạo một thành phần hàm sử dụng bộ chọn ngày:

function App() {
const [selectedDate, setSelectedDate] = useState(null);

return (
<div className="App">
<h1>Bộ chọn ngày tuyệt vời của tôi</h1>
<DatePicker
selected={selectedDate}
onChange={date => setSelectedDate(date)}
dateFormat="dd/MM/yyyy"
placeholderText="Chọn một ngày"
/>
<p>Ngày đã chọn: {selectedDate ? selectedDate.toDateString() : "Chưa chọn ngày"}</p>
</div>
);
}

Giải thích chi tiết:

1. Chúng ta sử dụng useState để tạo một biến trạng thái selectedDate và một hàm setSelectedDate để cập nhật nó.
2. Chúng ta hiển thị một thành phần DatePicker với một số thuộc tính:

• selected: Ngày hiện tại được chọn
• onChange: Hàm được gọi khi một ngày mới được chọn
• dateFormat: Cách hiển thị ngày
• placeholderText: Hiển thị khi chưa chọn ngày

3. Chúng ta hiển thị ngày đã chọn dưới bộ chọn, hoặc một thông báo nếu chưa chọn ngày.

Bước 3: Tùy chỉnh bộ chọn ngày

Một trong những điều tuyệt vời về react-datepicker là mức độ tùy chỉnh cao. Hãy xem xét một số cách chúng ta có thể thay đổi bộ chọn ngày:

function App() {
const [selectedDate, setSelectedDate] = useState(null);

return (
<div className="App">
<h1>Bộ chọn ngày tùy chỉnh của tôi</h1>
<DatePicker
selected={selectedDate}
onChange={date => setSelectedDate(date)}
dateFormat="dd/MM/yyyy"
minDate={new Date()}
filterDate={date => date.getDay() !== 6 && date.getDay() !== 0}
showYearDropdown
scrollableYearDropdown
/>
</div>
);
}

Trong ví dụ này:

• minDate={new Date()} đảm bảo rằng không thể chọn ngày quá khứ.
• filterDate được sử dụng để vô hiệu hóa cuối tuần (Thứ Bảy và Chủ Nhật).
• showYearDropdown và scrollableYearDropdown thêm một hộp thoại để thay đổi năm nhanh chóng.

Phương thức của Date Picker

Thư viện react-datepicker cung cấp nhiều phương thức hữu ích. Dưới đây là bảng tóm tắt một số trong số chúng:

Phương thức	Mô tả
setOpen(boolean)	Th手动设置日历的打开状态。
setFocus()	手动将焦点设置在输入框上。
handleCalendarClose()	手动关闭日历。
handleCalendarOpen()	手动打开日历。

您可以通过为DatePicker组件创建一个ref来使用这些方法：

const datePickerRef = useRef(null);

// 在您的JSX后面
<DatePicker ref={datePickerRef} />

// 使用方法
datePickerRef.current.setOpen(true);

Kết luận

Chúc mừng! Bạn đã học cách triển khai và tùy chỉnh một bộ chọn ngày trong React. Công cụ mạnh mẽ này sẽ làm cho việc chọn ngày trong ứng dụng của bạn trở nên dễ dàng hơn cho người dùng.

Nhớ rằng, chìa khóa để thành thạo React (hoặc bất kỳ khái niệm lập trình nào khác) là thực hành. Hãy thử thêm các bộ chọn ngày vào các dự án của bạn, thử nghiệm với các thuộc tính khác nhau và không ngại nhảy vào tài liệu để tìm hiểu các tính năng nâng cao hơn.

Chúc bạn lập trình vui vẻ, và ngày tháng của bạn luôn được chọn một cách hoàn hảo! ?️?‍?

Credits: Image by storyset