Tìm hiểu react-flatpickr, thư viện hỗ trợ lịch cho ReactJS

Tram Ho

I> Mở đầu

Mình đang tìm thư viện nào hỗ trợ dạng lịch cơ bản như các trang booking thì tìm thấy thư viện này flatpickr hỗ trợ rất tốt cho việc lịch, thử tìm hiểu thì nó còn có thư viện cho react react-flatpickr. Cùng mình tìm hiểu nó còn những gì hay, mà mình thấy nó đáp ứng tốt như thế

Cài đặt nào:

  • Cài đặt 1 dự án mới với create-react-app:

  • Cài đặt thư viện lịch nào

Mặc định khi cài thư viện này nó đã cài thêm flatpickr rồi

II> Bắt đầu tìm hiểu nào:

1> Dạng lịch cơ bản:

Giờ mình muốn có 1 lịch dạng cơ bản, khi chọn lịch thì sẽ thay đổi giá trị ô input:

Thế là qua vài đoạn code đơn giản chúng ta đã có 1 lịch như hình dưới…..

2> Tùy chỉnh với 1 số option hỗ trợ của thư viện

a> Theme:

  • Nếu bạn đã chán theme mặc định của nó, có thể đổi qua các theme dark bằng cách đổi dòng này:

Kết qủa:

  • Vẫn chưa thích, ta lại đổi qua theme airbnb

  • Ngoài ra thư viện còn hỗ trợ các loại theme này:

Tất nhiên là bạn có thể custom lại theme tùy vào sở thích của mình (bow)

b> Các option và event của nó:

  • dateFormat: như ví dụ ban đầu có định dạng d-m-Y tương ứng với ngày-tháng-năm (4 chữ số). Có thể tham khảo thêm tại đây:
    https://flatpickr.js.org/formatting/
  • Các event của nó: Các event hay dùng nhất vẫn là:
    • onReady: khi khởi tạo sẽ như thế nào
    • onOpen: khi mở
    • onClose: khi đóng
    • onDestroy: khi destroy

Tham khảo thêm tại đây
https://flatpickr.js.org/events/

  • Các instance của nó (https://flatpickr.js.org/instance-methods-properties-elements/):
    Có nhiều method cho bạn tương tấc với lịch như selectedDates dùng để lấy ngày đang chọn, clear dufngn để xóa lịch, jumpToDate nhảy tới ngày nào
  • Có 1 option hay dùng khác để chọn ngày giờ là enableTime. Bạn đổi như bên dưới:

kết quả:

c> Tùy chỉnh nâng cao với option plugin:

Ngoài ra thư viện còn có thể hỗ trợ tùy biến hơn với option plugin, bạn có thể dùng các plugin đang có của thư viện, tham khảo tại link này:https://flatpickr.js.org/plugins/

Mình chỉ giới thiệu 1 plugin dùng để chọn tháng năm:

Kết quả:

III> Kết luận:

Thư viện này hỗ trợ khá tốt các trường hợp datepicker hay gặp và có thể tùy biến được. Hy vọng với phần giới thiệu của mình bạn có thể thêm 1 lựa chọn để áp dụng vào công việc. Cảm ơn các bạn đã đọc

Tham khảo:
Chia sẻ bài viết ngay

Nguồn bài viết : Viblo