Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Các Ví Dụ Timepicker Trong Bootstrap

Các Ví Dụ Timepicker Trong Bootstrap


Ngày 20 Tháng 4 Năm 2020

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.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Do đây sử dụng SCSS nếu bạn muốn sử dụng CSS thì có thể xem tại đây nha : SCSS to CSS. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: jQuery UI Date Picker.

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.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Do đây sử dụng SCSS nếu bạn muốn sử dụng CSS thì có thể xem tại đây nha : SCSS to CSS. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Bootstrap Datepickers Inline Sliding.

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.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Bootstrap Date_Picker Vaildate.

Air-Datepicker:

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 air-datepicker by Ankit Hingarajiya (@ankithingarajiya) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Air-Datepicker.

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.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Flatpickr.

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.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Date and Time Picker.

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.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Do đây sử dụng SCSS, Pug nếu bạn muốn sử dụng HTML, CSS thì có thể xem tại đây nha : Pug to HTMLSCSS to CSS. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Bootstrap Datepicker.

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.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Bootstrap Date Range Picker.

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.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Datepicker With Date Range.

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.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Do đây sử dụng SCSS nếu bạn muốn sử dụng CSS thì có thể xem tại đây nha : SCSS to CSS. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Datepicker.

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.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Do đây sử dụng SCSS nếu bạn muốn sử dụng CSS thì có thể xem tại đây nha : SCSS to CSS. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Material Design Calendar.

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ẻ!