Trong bài viết này, chúng ta sẽ xem cách sử dụng các tùy chọn khác nhau cho Bootstrap Datepicker để cung cấp các tính năng datepicker khác nhau cho người dùng. Chúng tôi sẽ thiết lập một công cụ hẹn hò với bốn tùy chọn. Để thiết lập công cụ hẹn hò bootstrap, chúng tôi sẽ sử dụng HTML, CSS, jQuery và Bootstrap
Đặt công cụ hẹn hò bootstrap là một nhiệm vụ dễ dàng vì chúng tôi đang sử dụng tính năng khởi tạo công cụ hẹn hò và thêm các tùy chọn cho nó. Trước hết, hãy hiểu Datepicker là gì. Bootstrap Datepicker là kho lưu trữ nguồn mở cung cấp API để tích hợp bộ chọn ngày giờ vào giao diện người dùng của trang web. Hầu hết các biểu mẫu được tạo ngày nay đều sử dụng công cụ chọn ngày để nhập ngày thay vì nhập thủ công. Datepicker là tiện ích nhập liệu cung cấp cho người dùng chế độ xem lịch để chọn ngày. Bootstrap datepicker có nhiều tùy chọn để thiết lập datepicker.
Công cụ hẹn hò trong biểu mẫu
cú pháp
$("#datepickerID").datepicker({
OPTIONS
}).datepicker('update', new Date());
Tiếp cận
Đầu tiên, tạo tệp HTML có nội dung trang, trường nhập và các thành phần khác. Tạo các tệp javascript và CSS riêng biệt, nếu cần và đưa chúng vào tệp HTML
Thêm JAVASCRIPT để khởi tạo công cụ hẹn hò. Thêm các tùy chọn khác nhau để nhận các chức năng khác nhau trong datepicker
Follow the below code format to link some external CSS to your code inside the tag by following this order.
Thêm các liên kết CDN sau để cho phép sử dụng công cụ hẹn hò
Bootstrap 3. 0+ (Liên kết CSS và JS)
Giải pháp UX Datepicker 1. 2+
Thêm các lớp có sẵn khác nhau trong Bootstrap Datepicker, vào trường nhập theo yêu cầu.
Chúng tôi có thể thêm các tùy chọn datepicker vào thời điểm khi phiên bản datepicker được tạo
Sau đó, cần khởi tạo bộ chọn ngày cho trường nhập để khi người dùng nhấp vào trường nhập đó, lịch bật lên sẽ xuất hiện và sau đó họ có thể chọn ngày từ lời nhắc đó
ví dụ 1. Trong ví dụ này, chúng tôi đã thiết lập trình chọn ngày bootstrap với tùy chọn tự động đóng và tô sáng hôm nay. Tùy chọn tự động đóng sẽ tự động đóng bộ đếm ngày sau khi chọn ngày. Tùy chọn Todayhighlight làm nổi bật ngày hôm nay
đầu ra. Từ đầu ra, sau khi chạy dự án, chúng ta có thể thấy đầu ra sau trên trình duyệt
Bộ đếm ngày với các tùy chọn tự động đóng và đánh dấu hôm nay
ví dụ 2. Trong ví dụ này, chúng tôi sẽ thêm tùy chọn todayBtn sẽ thêm nút hôm nay ở cuối công cụ chọn ngày, khi nhấp vào sẽ chọn ngày hôm nay. Ngoài ra, chúng tôi sẽ thêm tùy chọn tiêu đề hiển thị tiêu đề bộ đếm ngày tháng. Chúng tôi sẽ sử dụng ví dụ trên bằng cách cập nhật mã, trong đó tập lệnh có cả hai tùy chọn được thêm vào chức năng
Bootstrap có công cụ chọn ngày 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 .
Làm cách nào để tạo một công cụ hẹn hò trong bootstrap?
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' });
