Datetimepicker thật dễ dàng với Flatpickr

bởi Con Heo Không Mập
0 bình luận

Thông thường khi làm việc với datetimepicker hay datepicker (các input chọn lựa ngày tháng), bạn sẽ sử dụng gì? Bootstrap Datetime, jQuery UI hay 1 thư viện nào đó? Trong bài viết hôm nay, mình sẽ chia sẻ với các bạn một thư viện datetimepicker khá hay ho: Flatpickr.

Giới thiệu datetimepicker Flatpickr

Mấy ngày gần đây mình phải làm việc khá nhiều với các dạng input ngày tháng. Thông thường, mình sẽ sử dụng input mặc định của HTML là input date type. Tuy nhiên, hạn chế của nó là bạn chỉ có lựa chọn được ngày tháng năm và rất khó để tuỳ chỉnh.

Vì thế mình quyết định đi tìm các thư viện xử lý cho vấn đề này. Sau khi thử qua một vài cái, thì mình phát hiện ra thằng Flatpickr. Nói sơ qua tí thì Flatpickr là một thư viện datetimepicker cực kỳ nhẹ và khá là mạnh.

datetimepicker với flatpickr

Ưu điểm của nó được ghi trên trang chủ của Flatpickr: Flatpickr là 1 thư viện datetimepicker rất “lean”, tối ưu UX và dễ mở rộng. Ở đây, “lean” theo lý giải của Flatpickr tức là gọn hơn, nhanh hơn. Flatpickr không phải đi dựa vào bất kỳ một thư viện nào khác (ví dụ jQuery) để chạy mà là một thư viện độc lập.

Ngoài ra thì tuy rất nhỏ gọn, Flatpickr vẫn đi kèm với nhiều giao diện và nhiều APIs có sẵn cũng như nhiều events khác nhau để bạn có thể dễ dàng tuỳ biến.

Cài đặt

Để cài đặt Flatpickr thì rất đơn giản, chúng ta có 3 cách: cài đặt thông qua NPM, tải về hoặc dùng CDN. Tuy nhiên cách thứ 3 thì mình không thích cho lắm vì tình trạng mạng của mình rất hay bị cá mập nó làm thịt 😀

Dùng NPM

Đây là cách chính thống của Flatpickr, đó là cài thông qua NPM. Gõ lệnh sau:

Dùng CDN hoặc tải về

Nếu bạn thích dùng CDN hơn, chúng ta có thể vào CDN của jsDeliver xài. Hoặc mình cũng có thể tải file của jsDeliver về xài luôn cũng được. Như mình nói thì mình sẽ không xài CDN nên mình sẽ tải về.

Link CDN, bạn hãy copy 2 thẻ sau:

Nếu bạn muốn tải về, thì click vào click trong 2 thẻ trên, dán vào trình duyệt sau đó chuột phải về save lại lưu về máy nhé!

Cách dùng

Để dùng được Flatpickr, đối với JS thuần thì bạn chỉ cần làm như sau:

Đối với framework thì hãy import thư viện này vào:

Sau khi đã import thư viện này vào code của mình, bạn có thể sử dụng Flatpicker để datetimepickr rồi. Cách sử dụng thư viện này rất đơn giản, đầu tiên hãy tạo 1 input với type là text (lưu ý nha, type của input này phải là text bạn nhé, và dữ liệu trả ra là string thông thường không phải là date đâu). Sau đó bạn có thể khai báo Flatpickr trong file script của mình như sau:

Một điểm cần lưu ý, {} là các config của Flatpickr để bạn tuỳ biến input, bạn có thể truyền trực tiếp vào flatpickr() hoặc có thể lưu vào 1 biến và truyền vào như sau:

Chỉ đơn giản vậy là bạn đã có thể dùng Flatpickr rồi. Ngoài ra, bạn có thể tham khảo API Options và Events, Hooks của thư viện này để dùng, nó có rất nhiều APIs cho bạn tha hồ config, link tham khảo:

Hãy theo dõi danh mục Chia Sẻ của bọn mình để có thể tìm hiểu thêm nhiều thư viện, công cụ thú vị hơn bạn nhé!

(Visited 19 times, 1 visits today)
0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x