Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
11 Timepicker Bootstrap Trong Website

11 Timepicker Bootstrap Trong Website


Ngày 23 Tháng 1 Năm 2021

Hôm nay chúng ta sẽ đi tìm hiểu cách thiết kế component timepicker bằng cách kết hợp HTML, CSS, Javascript và Bootstrap nhé.

Timepicker Là Gì?

Timepicker là một ô nhập dữ liệu trong form giúp người dùng chọn thời gian tùy vào mục đích của chúng ta. Ví dụ ở trong form đăng ký thì đa số đều bắt bạn nhập ngày, tháng, năm sinh thì đây chính là một kiểu timepicker. Nó giúp cho người dùng tiết kiệm thời gian và hạn chế tối đa việc xảy ra các lỗi cú pháp khi phải nhập bằng tay.

Để hiểu rõ hơn bạn xem ví dụ về Timepicker của trang web hwww.norwegian.com dưới đây nhé:

Ví dụ về Timepicker trong trang web

Khi bạn thiết kế một component timepicker thì việc chúng ta quan tâm là làm sao người dùng có thể dễ dàng sử dụng nhất có thể. Ở đây bạn có thể phân tách ngày tháng năm thành ba phần riêng biệt với mỗi phần là một ô select(chọn) hay sử dụng component dropdown để hiển thị giá trị. Một lưu ý nhỏ là khi sử dụng timpicker dạng này bạn cần phải kiểm tra dữ liệu thông tin người dùng nhập vào một cách cẩn thận vì rất có thể không đúng với thực tế ví dụ như ngày 31 tháng 2. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

Ví dụ về Timepicker Dropdown trong trang web

Cách thứ hai là bạn có thể cho người dùng nhập vào giá trị số trong component timepicker với định dạng được bạn xác định từ trước hay cũng có thể theo hướng dẫn của bạn. Ví dụ khi bạn muốn hướng dẫn người dùng nhập ngày tháng năm theo đúng cú pháp thì có thể đặt hướng dẫn như sau: yyyy-mm-dd thì khi đó người ta sẽ hiểu là năm-tháng-ngày. Và bạn cũng nên kết hợp với calenderpicker để người dùng nhìn trên lịch có thể dễ hình dung hơn. Để hiểu rõ hơn bạn hãy xem ví dụ dưới đây nhé:

Ví dụ về Timepicker input trong trang web

Nếu bạn muốn tiết kiệm thời gian cũng như giảm các lỗi nhập sai định dạng cho người dùng thì nên sử dụng calendar(lịch). Nó giúp hiển thị trực quan các ngày tháng trong năm và thân thiện với màn hình moblie. Để hiểu rõ hơn bạn xem hình ảnh sau đây nhé:

Ví dụ về Timepicker kết hợp calendar trong trang web

Chúng ta cũng có thể tích hợp chọn thời gian vào trong timepicker. Nó sẽ phù hợp với một số ngữ cảnh nhất định như chúng ta muốn tạo một form đặt chuyến bay thì ngoài ngày tháng năm ra thì bạn cần biết thêm thông tin mà người dùng muốn bay. Để hiểu rõ hơn bạn xem ví dụ dưới đây nhé:

Ví dụ về Timepicker kết hợp input chọn thời gian trong trang web

Sau khi hiểu sơ lược về timepicker thì sau đây mình sẽ giới thiệu một số Timepicker snippet giúp bạn có sự lựa chọn tốt nhất để phù hợp với mục đích cũng như thiết kế, bố cục trang web của bạn.

Các Ví Dụ Timepicker Trong Bootstrap

jQuery UI Date Picker:

jQuery UI Date Picker

Đây là đoạn code và khi hiển thị trên web của Timepicker này nhé:

See the Pen jQuery UI Date Picker by Ashley Ktorou (@aktorou) on CodePen.

Nguồn

Bootstrap Datepickers Inline Sliding:

Bootstrap Datepickers Inline Sliding

Đây là đoạn code và khi hiển thị trên web của Timepicker này nhé:

See the Pen Bootstrap datepickers inline sliding (demo) by Valentin Dzhankhotov (@vushe) on CodePen.

Nguồn

Bootstrap Date_Picker Vaildate:

Bootstrap Date_Picker Vaildate

Đây là đoạn code và khi hiển thị trên web của Timepicker này nhé:

See the Pen bootstrap date picker vaildate by Peter Schöning (@sykarra) on CodePen.

Nguồn

Air-Datepicker:

Air-Datepicker

Đây là đoạn code và khi hiển thị trên web của Timepicker này nhé:

See the Pen air-datepicker by Ankit Hingarajiya (@ankithingarajiya) on CodePen.

Nguồn

Flatpickr:

Timepicker Flatpickr

Đây là đoạn code và khi hiển thị trên web của Timepicker này nhé:

See the Pen Flatpickr by Rio Dwi Prabowo (@riyos94) on CodePen.

Nguồn

Date and Time Picker:

Time và Date Picker

Đây là đoạn code và khi hiển thị trên web của Timepicker này nhé:

See the Pen Date and Time Picker(Source from bbbootstrap) by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Bootstrap Datepicker:

Bootstrap Datepicker

Đây là đoạn code và khi hiển thị trên web của Timepicker này nhé:

See the Pen Bootstrap Datepicker Demo by Ryan Mulligan (@hexagoncircle) on CodePen.

Nguồn

Bootstrap Date Range Picker:

Bootstrap Date Range Picker

Đây là đoạn code và khi hiển thị trên web của Timepicker này nhé:

See the Pen Bootstrap Date Range Picker(Source from bbootstrap) by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Datepicker With Date Range:

Datepicker With Date Range

Đây là đoạn code và khi hiển thị trên web của Timepicker này nhé:

See the Pen Datepicker With Date Range(Source from bbbootstrap) by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Datepicker:

Datepicker

Đây là đoạn code và khi hiển thị trên web của Timepicker này nhé:

See the Pen Journey - Date picker by Sam Woolerton (@samwooly) on CodePen.

Nguồn

Material Design Calendar:

Material Design Calendar

Đây là đoạn code và khi hiển thị trên web của Timepicker này nhé:

See the Pen Material design calendar + input by Jacob (@Jacobdo) on CodePen.

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ giúp bạn rút ngắn thời gian trong việc thiết kế giao diện component Timepicker cho trang web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!