Bootstrap 5 datepicker w3schools
|
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ẫuTrước tiên, chúng ta cần tạo một biểu mẫu bao gồm ngày tháng _______6. Bạn có thể viết phần này bằng tay bằng cách sử dụng cú pháp biểu mẫu Bootstrap hoặc bạn có thể sử dụng trình tạo biểu mẫu Bootstrap phổ biến của chúng tôi. Mã biểu mẫu của bạn sẽ trông như thế nà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 đầu vào là Bướ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 Đầ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 hộp cát hữu ích. 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 |
