Ngày nhập Bootstrap 5
Hướng dẫn này sẽ hướng dẫn bạn cách thêm bộ chọn ngày vào biểu mẫu của bạn bằng các công cụ mã nguồn mở. Bộ chọn ngày là một danh sách thả xuống tương tác giúp bạn dễ dàng chọn ngày từ lịch thay vì nhập thủ công. Đó là một cách tuyệt vời để tránh lỗi người dùng vì bạn có thể xem ngày tương ứng trong tuần cho mỗi ngày. Thêm vào đó, nó mang lại cho biểu mẫu của bạn thêm một chút tương tác tỏa sáng Show
Plugin Bootstrap-DatepickerChúng tôi sẽ sử dụng plugin Bootstrap-Datepicker để xử lý tất cả công việc bẩn thỉu. Có một số tùy chọn bộ chọn ngày, nhưng Bootstrap-Datepicker là một trong những thư viện phổ biến và đầy đủ tính năng nhất hiện có. Tuy nhiên, nếu thay vì một ngày duy nhất, bạn muốn bộ chọn ngày mở rộng trên một phạm vi ngày, thì bạn có thể xem xét tùy chọn này Plugin chọn ngày có sẵn qua CloudFlare CDN hoặc bạn có thể tải xuống từ Github điều kiện tiên quyếtĐể tạo bộ chọn ngày của chúng tôi, chúng tôi sẽ cần các điều kiện tiên quyết sau
Sau khi thêm Bootstrap-Datepicker và các điều kiện tiên quyết, tiêu đề trang web của bạn sẽ giống như thế này
Bước 1. Tạo biểu mẫuĐầu tiên, chúng ta cần tạo một biểu mẫu bao gồm một ngày
Các div Tất cả mã Bootstrap được bao bọc trong một div Lưu ý rằng tôi đã cung cấp thông tin đầu vào là 0 và 1 ngày. Đây là mã định danh duy nhất mà chúng tôi sẽ cần cung cấp cho plugin datepickerBước 3. Thiết lập và Khởi tạo Plugin DatepickerTất cả những gì còn lại phải làm là viết một đoạn mã JavaScript để cho plugin datepicker biết nơi tìm ngày 2 và cách xử lý nóĐầu tiên, chúng tôi sử dụng jQuery để đợi cho đến khi các phần tử trang tải xong. Sau đó, chúng tôi chọn ngày Nếu người dùng đang sử dụng phiên bản Bootstrap bị cô lập của chúng tôi, chúng tôi chọn vùng chứa div `. bootstrap-iso'. Bằng cách này, chúng ta có thể yêu cầu bộ chọn ngày nối thêm phần tử tương tác trong div nơi Bootstrap CSS đang được áp dụng Có một số tùy chọn plugin có thể được mô tả trong tài liệu. Đối với mục đích của chúng tôi, chúng tôi chỉ định định dạng của ngày, xác định phần tử vùng chứa, đánh dấu ngày hôm nay và đóng cửa sổ bật lên tương tác sau khi chọn ngày. Tất cả những điều đó, tất cả những gì còn lại là khởi tạo plugin Mã hoàn chỉnh chúng tôi sẽ sử dụng trông như thế này
Nếu bạn muốn thử nghiệm các tùy chọn plugin khác nhau, plugin sẽ cung cấp một. Nó cho phép bạn kiểm tra đầu vào, xem trước bộ đếm ngày và xem mã tùy chọn ví dụ Hướng dẫn Trình tạo Biểu mẫu BootstrapHướng dẫn trên có thể được mã hóa bằng tay. Tuy nhiên, một cách dễ dàng hơn nhiều để hoàn thành hướng dẫn là sử dụng Trình tạo biểu mẫu Bootstrap của chúng tôi. Nếu bạn đi tuyến đường này, chỉ cần Bootstrap 5 có Datepicker không?Bootstrap 5 Datepicker . Bộ chọn ngày là một plugin bổ sung chức năng chọn thời gian mà không cần sử dụng mã JavaScript tùy chỉnh.
Làm cách nào để thêm datepicker Bootstrap 5?Tải xuống và bao gồm. Tải xuống jQuery và Bootstrap. . Khởi tạo. Tạo một phần tử đầu vào và khởi tạo nó bằng một trong hai cách –. Tùy chọn. Cú pháp ( thuộc tính dữ liệu ) – data-date-[option-name] = value. . phương pháp. Cú pháp – $(bộ chọn). datepicker("tên phương thức",[giá trị]);. Sự kiện. Một số sự kiện là -. Phần kết luận Làm cách nào để đặt ngày trong Bootstrap Datepicker?Các tùy chọn được chuyển đến hàm datepicker thông qua hàm băm tùy chọn khi khởi tạo. . công cụ hẹn hò ({ định dạng. 'mm/dd/yyyy', ngày bắt đầu. '-3d' }); công cụ hẹn hò ({ startDate. '-3d' }); $. fn. bảng chọn ngày. mặc định. định dạng = "mm/dd/yyyy"; . bảng chọn ngày') Bootstrap có Datepicker không?Bộ chọn ngày của Bootstrap có nhiều tùy chọn để thiết lập bộ chọn ngày . |