Tùy chọn bootstrap-datepicker
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
Bootstrap 3. 0+ (Liên kết CSS và JS) Giải pháp UX Datepicker 1. 2+
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 HTML
________số 8_______
________số 8_______
________số 8_______
________số 8_______
đầ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 |