Bootstrap bộ chọn nhiều ngày
|
Tôi đang cố gắng sử dụng tập lệnh cao cấp cho Bộ chọn ngày. Khi sử dụng nhiều công cụ chọn ngày trên một trang, nó sẽ hiển thị hộp ngày nhiều lần. Nó dường như lặp lại cho nhiều hình thức như trên trang. Tôi đang làm gì đó sai hay đây là một vấn đề?______0
Xin chào, Hiện tại, DatePicker không cung cấp chức năng này. Tuy nhiên, nó rất có ý nghĩa, vì vậy tôi đang trình bày ý tưởng này để xem nhóm nhà phát triển nghĩ gì. Cảm ơn bạn đã liên hệ. Trân trọng, Kuba Show
Menu chọn lọc là lựa chọn phổ biến cho bộ chọn ngày vì chúng dễ cài đặt. Nhưng sau nhiều thập kỷ sử dụng menu MM/DD/YY, tôi nghĩ người dùng của chúng tôi xứng đáng nhận được những điều tốt hơn Việc thêm công cụ chọn ngày vào biểu mẫu của bạn khá đơn giản và hầu hết các plugin công cụ chọn ngày đều hoàn toàn miễn phí. Sau khi bạn tìm hiểu quy trình thiết lập cơ bản, bạn sẽ không bao giờ quay lại, vì vậy, thực sự chỉ là vấn đề tìm được một quy trình tốt. Tôi đã lùng sục trên web để tìm kiếm các plugin tốt nhất và sắp xếp tất cả chúng trong bài đăng này Bạn sẽ tìm thấy các plugin vanilla JS, plugin jQuery và thậm chí cả các tiện ích mở rộng cho các khung như Bootstrap. Bất kể bạn cần gì, chắc chắn sẽ có một plugin ở đây dành cho bạn Hộp công cụ thiết kế web Tải xuống không giới hạn. Mẫu HTML & Bootstrap, Chủ đề & Plugin WordPress, v.v.  Mẫu HTML Hơn 3.200 mẫu Mẫu Bootstrap Hơn 2.000 mẫu Mẫu bảng điều khiển Hơn 240 mẫu chủ đề WordPress 1.450+ Chủ đề Mẫu bản tin Hơn 270 mẫu Phông chữ web Hơn 13.500 phông chữ Bắt đầu tải xuống ngay bây giờ 1. máy cắt phẳngPlugin Flatpickr nhẹ rất dễ sử dụng và thậm chí còn dễ cài đặt hơn. Nó được thiết kế với mục đích đơn giản nên giao diện người dùng mặc định sẽ phù hợp với bất kỳ bố cục nào Nếu bạn xem qua trang ví dụ, bạn sẽ nhận thấy công cụ hẹn hò này không phức tạp lắm. Nhưng đó thường là những gì người dùng muốn. một giao diện đơn giản để nhập dữ liệu và tiếp tục Với Flatpickr, bạn có thể tùy chỉnh ngày, tháng và năm ban đầu cùng với các hạn chế về (các) ngày có thể được chọn. Ngoài ra, bạn có thể thêm tham số thời gian tùy chọn bằng đồng hồ 12H hoặc 24H Không còn nghi ngờ gì nữa, đây là một trong những plugin chọn ngày tốt hơn chỉ vì thiết kế, UX và các tính năng của nó 2. Chọn một ngày. jsMột lựa chọn khác tôi thực sự thích là Pickadate. plugin js. Điều này được thiết kế để thân thiện với thiết bị di động và đáp ứng đầy đủ, vì vậy đây là một giải pháp tuyệt vời cho tất cả các thiết bị Pickadate chạy trên jQuery, vì vậy bạn cần thư viện đó làm phụ thuộc. Tuy nhiên, tệp này khá nhẹ và không mất nhiều thời gian để làm cho nó hoạt động nên ngay cả với jQuery, bạn sẽ không nhận thấy bất kỳ độ trễ trang nào Điều này cung cấp cả menu chọn ngày và giờ, do đó, đây là tùy chọn có đầy đủ tính năng cho dù bạn đang thu thập dữ liệu gì 3. Bộ chọn phạm vi ngàyBộ chọn phạm vi đầu vào cực kỳ phổ biến với các chương trình lập lịch trình và ứng dụng dữ liệu trực quan. Ví dụ: Google Analytics sử dụng bộ chọn phạm vi ngày của riêng họ cho dữ liệu khách truy cập trên một trang web cụ thể Để tạo lại hiệu ứng này, hãy thử Bộ chọn phạm vi ngày. Nó được thiết kế để phù hợp với biểu định kiểu CSS của Bootstrap nhưng cũng có thể được sử dụng một mình Ngoài ra, nó hỗ trợ bộ chọn nhiều tháng, bộ chọn một tháng và các giá trị được xác định trước cho các phạm vi ngày phổ biến (tuần trước, tháng trước, v.v.) Cho đến nay, plugin lựa chọn phạm vi JS được thiết kế tốt nhất mà tôi từng thấy 4. cặp ngày. jsĐể sử dụng một cái gì đó đơn giản hơn một chút để lựa chọn phạm vi, hãy thử Datepair. js Điều này dựa trên các trường nhập kép để chọn ngày bắt đầu và ngày kết thúc của một phạm vi. Nó cũng có thể bao gồm các khoảng thời gian dựa trên cài đặt của bạn và cách bạn định cấu hình plugin Điều này có tốt hơn một giao diện người dùng chọn ngày không? Nhưng đây là một plugin đơn giản để thiết lập và khách truy cập của bạn có thể thích các đầu vào trường đơn hơn 5. Bộ chọn ngày giờĐây là một trong những plugin độc đáo hơn với giao diện khá bất thường Plugin DateTimePicker có menu thả xuống phản hồi riêng cho phép người dùng chọn ngày/giờ của họ bằng các biểu tượng dấu cộng và dấu trừ Một mặt, điều này dễ dàng hơn để di chuyển xung quanh và nhanh chóng thay đổi tháng/năm bằng một vài thao tác. Nhưng nó cũng không phải là giao diện người dùng lịch thông thường nên có thể cần một số điều chỉnh đối với những người dùng chưa quen với giao diện này Mọi thứ đều có ưu và nhược điểm, vì vậy tôi khuyên bạn hãy xem qua plugin và xem bạn nghĩ gì. Điều này không hỗ trợ các đầu vào ngày và giờ riêng biệt, nhưng bạn cũng có thể kết hợp chúng lại với nhau để chọn ngày giờ chỉ bằng một cú nhấp chuột 6. glDatePickerĐể có thiết kế chi tiết và vô số tính năng tùy chọn, hãy xem plugin glDatePicker. Nó khá nhẹ khi xem xét số tiền bạn nhận được và nó đo được khoảng 7KB khi được thu nhỏ Điều này chạy trên jQuery, vì vậy bạn cũng phải xem xét điều đó. Nhưng nó là một trong số ít plugin cung cấp chủ đề tuyệt đẹp cho màn hình chọn ngày theo lịch Nó có một vài mẫu được thiết kế sẵn, nhưng nó cũng đi kèm với các thuộc tính CSS mà bạn có thể tự thiết kế lại. Chưa kể tất cả các chức năng JS đều có lệnh gọi lại, vì vậy nếu bạn cảm thấy thoải mái với việc viết mã, bạn có thể thêm các tính năng của riêng mình vào hỗn hợp 7. người hái độcMặc dù về mặt kỹ thuật, đây không phải là công cụ chọn ngày nhưng nó là một trong những công cụ chọn thời gian tốt hơn hiện có Wickedpicker là một plugin chọn thời gian do jQuery cung cấp, hoạt động trên mọi trường nhập liệu. Nó hỗ trợ đầu vào của người dùng cho giờ/phút và cài đặt AM/PM. Bạn cũng có thể chạy nó trên đồng hồ 24 giờ với tùy chọn JS đơn giản Một số plugin chọn ngày tháng có lựa chọn thời gian, nhưng nó là một tính năng bổ sung. Plugin này được thiết kế dành riêng cho đầu vào thời gian, vì vậy đây là một lựa chọn tốt nếu đó là tất cả những gì bạn cần 8. Bootstrap DatepickerBất cứ ai quen thuộc với Bootstrap đều biết nó hữu ích như thế nào đối với các dự án mới. Nếu bạn thường xuyên thiết kế các trang web trên Bootstrap thì bạn nên lưu Bootstrap Datepicker này Đây là một trong số ít plugin được tạo riêng cho bố cục BS3 và nó cũng phải tương thích với bản phát hành Bootstrap 4 sắp tới Thiết kế bao gồm một phần để thay đổi tháng & năm cùng với bộ chọn thời gian để thay đổi phút/giờ trong bộ chọn ngày của bạn. Nó kết hợp hoàn hảo với BS GUI, vì vậy chắc chắn nó là một yếu tố chính cho bất kỳ ai sử dụng Bootstrap 9. Tổ chức hẹn hòMột khung giao diện người dùng phổ biến khác là Foundation và nếu bạn thích thư viện đó hơn, bạn nên xem công cụ hẹn hò Foundation này cũng miễn phí 100% Nó cũng đi kèm với bộ chọn thời gian và các tùy chọn để bao gồm thời gian bên trong màn hình chọn ngày. Bạn thậm chí có thể xác định ngày dựa trên cài đặt cố định (i. e. chỉ những ngày nhất định có sẵn) và giới hạn những ngày đó vào những thời điểm nhất định Bạn thậm chí có thể định kiểu lại đầu vào thời gian với các lựa chọn cố định như khoảng thời gian 15 phút Có rất nhiều thứ bạn có thể làm với plugin này, vì vậy nó là một bổ sung tuyệt vời cho bất kỳ trang web Foundation nào 10. FoxRunSoftware DatePickerĐây là một trong những plugin hàng đầu trên GitHub dành cho công cụ hẹn hò jQuery. Nó có tiêu đề đơn giản là “DatePicker” nhưng để phân biệt với phần còn lại, nó là plugin được thiết kế bởi FoxRunSoftware Nó đi kèm với một giao diện rõ ràng và theo mặc định, nó sử dụng cửa sổ GUI 3 tháng để chọn ngày. Cảm giác này giống như bộ chọn Google Analytics ngoại trừ nó nhỏ hơn một chút Các cuộc gọi lại khá đơn giản để viết mã và bạn có nhiều quyền kiểm soát đối với cách quản lý UX. Chắc chắn là một công cụ chọn ngày đáng để tiết kiệm nếu bạn muốn sao chép GUI của Analytics 11. máy lấy ngày jQĐây là một plugin datepicker khác với tiêu đề đơn giản là Datepicker. Một lần nữa, nó chạy trên jQuery nhưng cái này được thiết kế bởi nhà phát triển Trung Quốc Fengyuan Chen Plugin Datepicker này là một hiện tượng và nó có rất nhiều tài liệu dành cho các nhà phát triển JS mới hơn Trang demo chính rất phù hợp để chơi xung quanh nhưng hãy xem repo GitHub nếu bạn muốn cài đặt plugin này và chạy trên trang web của mình Và nếu bạn đang tìm kiếm thêm các plugin công cụ hẹn hò, hãy thử tìm kiếm trên GitHub. Các nhà phát triển web luôn phát hành các plugin mới để bạn không bao giờ biết mình sẽ tìm thấy gì Làm cách nào để chọn nhiều ngày trong công cụ hẹn hò bootstrap?Bộ chọn ngày nhiều lựa chọn của BootstrapLàm cách nào để chọn nhiều ngày trong datepicker?Chọn nhiều ngày trong Bộ chọn ngày của jQuery . Thêm các tham chiếu js và css sau vào một trang web Thêm hộp văn bản nơi chúng tôi có thể xem ngày Cuối cùng, thêm mã javascript sau để hiển thị bộ chọn ngày trên tiêu điểm của hộp văn bản. . đầu ra. . Hình 1. Đầu ra của nhiều ngày được chọn Phần kết luận Bootstrap 4 có Datetimepicker không?Bộ đếm thời gian tương thích Bootstrap 4 với giao diện người dùng Material Design . Thành phần Datetimepicker cho phép người dùng chọn ngày từ lịch và thời gian từ đồng hồ analog trực quan; . Bạn có thể tìm thấy nhiều ví dụ về bộ chọn ngày và giờ tại đây.
Làm cách nào để đặt phạm vi ngày trong bootstrap datepicker?Tùy chọn . startDate (Đối tượng ngày, đối tượng thời điểm hoặc chuỗi) Ngày bắt đầu của phạm vi ngày được chọn ban đầu ngày cuối. (Đối tượng ngày, đối tượng thời điểm hoặc chuỗi) Kết thúc phạm vi ngày được chọn ban đầu minDate. (Đối tượng ngày, đối tượng thời điểm hoặc chuỗi) Ngày sớm nhất mà người dùng có thể chọn |
