Hướng dẫn timepicker bootstrap 4
|
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é. Show
Nội dung chí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é: 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é: 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é: 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é: 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é: 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. 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:Đâ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:Đâ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:Đâ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:Đâ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:Đâ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:Đâ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:Đâ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:Đâ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:Đâ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:Đâ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 Angular Material Datepicker:Kết qủa bạn xem bên dưới nha: See the Pen Angular Material Datepicker by Aleksey (@fdooch) on CodePen. Nguồn JQuery UI DatepickerKết qủa bạn xem bên dưới nha: See the Pen jQuery UI: Datepicker Reset Date by Alex Gill (@alexpetergill) on CodePen. Nguồn IOS datepickerKết qủa bạn xem bên dưới nha: See the Pen ios datepicker (pure js) by Chaz (@gnauhca) on CodePen. Nguồn Vue datepickerKết qủa bạn xem bên dưới nha: See the Pen Clean Vue datepicker component with animations by Loïc Monard (@LoicMonard) on CodePen. Nguồn Material Design Time PickerKết qủa bạn xem bên dưới nha: See the Pen Material Design - Pickers by Leena Lavanya (@leenalavanya) on CodePen. Nguồn Datepicker HTMLKết qủa bạn xem bên dưới nha: See the Pen custom CSS HTML5 calendar input date icon by Alfonso (@melolonta) on CodePen. Nguồn Datepicker With TailwindCSSKết qủa bạn xem bên dưới nha: See the Pen Datepicker with TailwindCSS and AlpineJS by Mithicher (@mithicher) on CodePen. Nguồn Vanilla Javascript TimepickerKết qủa bạn xem bên dưới nha: See the Pen Vanilla Javascript Timepicker by Lance Jernigan (@Lance-Jernigan) on CodePen. Nguồn Vue timepickerKết qủa bạn xem bên dưới nha: See the Pen Vue timepicker by Irko Palenius (@ispal) 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ẻ! |
