Có thể bạn đã từng gặp trường hợp như thế này, 1 chức năng nhỏ trong quá trình tìm kiếm, trong đó có 2 tùy chọn chọn ngày CheckIn & CheckOut sử dụng Datepicker và bạn nghĩ ngay phải tạo Date Range Picker với Bootstrap Datepicker
Yêu cầu là ngày Nhận phòng phải lớn hơn hoặc bằng ngày hiện tại, và ngày Trả phòng phải lớn hơn ngày Nhận phòng, không cho phép chọn ngược về quá khứ. Phạm vi ngày Phạm vi ngày Phạm vi ngày
Vì vậy phải xử lý như thế nào?
Tải xuống bản trình diễn
1. Chuẩn bị
Các bạn cần tải xuống thư viện và Datepicker
2. css
Ở phần của trang, ta thêm 2 thư viện Css của Bootstrap & Datepicker
3. Html
Về html ta chỉ cần 2 cái input text để dùng checkin & checkout
Check In: | Check Out: |
4. Javascript [jQuery]
Bạn cần thêm 3 cái tệp js vào cuối trang nữa, trên thẻ đóng
Và đoạn mã Js để hiển thị Datepicker và giới hạn khoảng thời gian lựa chọn theo yêu cầu đặt ra ban đầu
Tất cả các bài viết. Bootstrap
Bước 1. Tạo cấu trúc HTML cho menu chọn ngày
Chọn ngày:
Bước 2. Định dạng CSS
Bước 3. Call library Bootstrap
Bước 4. Call library JQUERY
Bước 5. Use JQUERY get day
Bước 6. Gọi thư viện Datepicker
- Thẻ.
- Bộ đếm ngày
- Create Datepicker
- Bootstrap
- Công cụ hẹn hò Bootstrap
- JQUERY
- CSS3
Bootstrap Xem [29658] Học thiết kế web
hôm nay chúng ta sẽ đi tìm hiểu cách thiết kế thành phần 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 biểu mẫu giúp người dùng chọn thời gian tùy chọn vào mục đích của chúng tôi. Ví dụ trong biểu mẫu đă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 đồng hồ bấm giờ. Nó giúp cho người dùng tiết kiệm thời gian và hạn chế tối đa xảy ra các cú pháp lỗi khi phải nhập bằng tay
Để hiểu rõ hơn bạn hãy xem ví dụ về Timepicker của trang web hwww. người na uy. com dưới đây nhé
Khi bạn thiết kế một bộ phận hẹn giờ 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ể. Tại đây, bạn có thể tách tháng năm thành ba phần riêng biệt với mỗi phần là một ô chọn [chọn] hoặc sử dụng trình đơn thả xuống thành phần để hiển thị giá trị. Một lưu ý nhỏ là khi sử dụng công cụ hẹn giờ dạng này, bạ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 ví dụ thực tế 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 bộ đếm thời gian thành phần với định dạng được bạn xác định từ trước hoặc 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 vào 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 tiết kiệm thời gian cũng như giảm các lỗi nhập định dạng sai cho người dùng thì nên sử dụng lịch[lịch]. Nó giúp hiển thị trực tiếp 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 các lựa chọn thời gian vào trong bộ đếm thời gian. 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 hình thức đặ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
Bộ chọn ngày giao diện người dùng jQuery
Đây là đoạn mã và khi hiển thị trên web của Timepicker này nhé
Xem Bộ chọn ngày trên giao diện người dùng Pen jQuery của Ashley Ktorou [@aktorou] trên CodePen
Nguồn
Bootstrap Datepickers Trượt nội tuyến
Đây là đoạn mã và khi hiển thị trên web của Timepicker này nhé
Xem Pen Bootstrap datepickers trượt nội tuyến [demo] của Valentin Dzhankhotov [@vushe] trên CodePen
Nguồn
Xác thực Bootstrap DatePicker
Đây là đoạn mã và khi hiển thị trên web của Timepicker này nhé
Xem xác thực công cụ hẹn hò Pen bootstrap của Peter Schöning [@sykarra] trên CodePen
Nguồn
Air-Datepicker
Đây là đoạn mã và khi hiển thị trên web của Timepicker này nhé
Xem Pen air-datepicker của Ankit Hingarajiya [@ankithingarajiya] trên CodePen
Nguồn
máy cắt phẳng
Đây là đoạn mã và khi hiển thị trên web của Timepicker này nhé
Xem Pen Flatpickr của Rio Dwi Prabowo [@riyos94] trên CodePen
Nguồn
Bộ chọn ngày và giờ
Đây là đoạn mã và khi hiển thị trên web của Timepicker này nhé
Xem Bộ chọn ngày và giờ trên bút [Nguồn từ bbbootstrap] của haycuoilennao19 [@haycuoilennao19] trên CodePen
Nguồn
Bootstrap Datepicker
Đây là đoạn mã và khi hiển thị trên web của Timepicker này nhé
Xem Bản trình diễn Pen Bootstrap Datepicker của Ryan Mulligan [@hexagoncircle] trên CodePen
Nguồn
Bộ chọn phạm vi ngày Bootstrap
Đây là đoạn mã và khi hiển thị trên web của Timepicker này nhé
Xem Pen Bootstrap Date Range Picker[Source from bbootstrap] của haycuoilennao19 [@haycuoilennao19] trên CodePen
Nguồn
Công cụ hẹn hò với phạm vi ngày
Đây là đoạn mã và khi hiển thị trên web của Timepicker này nhé
Xem Pen Datepicker With Date Range[Source from bbbootstrap] của haycuoilennao19 [@haycuoilennao19] trên CodePen
Nguồn
Bảng chọn ngày
Đây là đoạn mã và khi hiển thị trên web của Timepicker này nhé
Xem Hành trình bút - Công cụ chọn ngày của Sam Woolerton [@samwooly] trên CodePen
Nguồn
Lịch thiết kế vật liệu
Đây là đoạn mã và khi hiển thị trên web của Timepicker này nhé
Xem lịch thiết kế Pen Material + đầu vào của Jacob [@Jacobdo] trên CodePen
Nguồn
Vật liệu góc
Kết quả bạn xem bên dưới nha
Xem Công cụ đếm ngày vật liệu góc cạnh bút của Aleksey [@fdooch] trên CodePen
Nguồn
Công cụ hẹn giờ giao diện người dùng JQuery
Kết quả bạn xem bên dưới nha
Xem giao diện người dùng bút jQuery. Datepicker Đặt lại ngày của Alex Gill [@alexpetergill] trên CodePen
Nguồn
công cụ hẹn hò trên iOS
Kết quả bạn xem bên dưới nha
Xem công cụ hẹn hò Pen ios [js thuần túy] của Chaz [@gnauhca] trên CodePen
Nguồn
công cụ hẹn hò Vue
Kết quả bạn xem bên dưới nha
Xem thành phần công cụ hẹn hò Pen Clean Vue với hoạt ảnh của Loïc Monard [@LoicMonard] trên CodePen
Nguồn
Công cụ chọn thời gian thiết kế vật liệu
Kết quả bạn xem bên dưới nha
Xem Thiết kế Material Design - Pickers của Leena Lavanya [@leenalavanya] trên CodePen
Nguồn
HTML công cụ hẹn hò
Kết quả bạn xem bên dưới nha
Xem biểu tượng ngày nhập lịch CSS HTML5 tùy chỉnh của Pen bởi Alfonso [@melolonta] trên CodePen
Nguồn
Công cụ hẹn hò với TailwindCSS
Kết quả bạn xem bên dưới nha
Xem Pen Datepicker với TailwindCSS và AlpineJS của Mithicher [@mithicher] trên CodePen
Nguồn
Đồng hồ bấm giờ Javascript Vanilla
Kết quả bạn xem bên dưới nha
Xem Bộ đếm thời gian Javascript Pen Vanilla của Lance Jernigan [@Lance-Jernigan] trên CodePen
Nguồn
đồng hồ bấm giờ Vue
Kết quả bạn xem bên dưới nha
Xem bộ đếm thời gian Pen Vue của Irko Palenius [@ispal] trên 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ế thành phần giao diện 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ẻ