Datetimepicker Bootstrap 3 ví dụ
|
Trong hướng dẫn về công cụ chọn ngày tháng để quản lý ngày tháng trong các dự án dựa trên Bootstrap, tôi đã chỉ ra cách bạn có thể sử dụng trình cắm bootstrap-datepicker với các trường văn bản. Tôi cũng trình bày các bản trình diễn để tùy chỉnh giao diện bằng cách sử dụng CSS tùy chỉnh cho lịch bằng cách ghi đè các lớp mặc định Show
Tuy nhiên plug-in đó chỉ dùng để quản lý theo ngày tháng. Trong một số trường hợp nhất định, bạn có thể cần cho phép khách truy cập không chỉ chọn ngày mà cả thời gian. May mắn thay, nhiều nhà phát triển tuyệt vời đang làm việc trên nó để thêm các tính năng hữu ích cho khung Bootstrap Trong hướng dẫn này, tôi sẽ chỉ cho bạn các ví dụ về thiết lập bộ chọn ngày giờ bằng cách sử dụng trình cắm Bootstrap 3 Datepicker. Sau đó, bạn cũng có thể xem các bước thiết lập plug-in đơn giản để sử dụng cho các dự án của mình. Vì vậy, hãy để tôi bắt đầu với các ví dụ đầu tiên Bản trình diễn đơn giản hiển thị ngày và giờ trong hộp văn bảnTrong ví dụ này, ngày và giờ có thể được chọn khi bạn nhấp vào biểu tượng phía trước hộp văn bản. Theo mặc định, lịch xuất hiện đầu tiên để chọn ngày. Ở phía dưới, bạn có thể thấy đồng hồ để chọn thời gian  Đánh dấu sau đây được sử dụng để tạo hộp văn bản có biểu tượng 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Trong phần script, id của div được gọi với datetimepicker() 1 2 3 4 5 6 7 8 9 Bạn có thể xem mã hoàn chỉnh trong trang demo Trong ví dụ trên, thành phần bộ chọn ngày giờ sẽ mở ra khi bạn nhấp vào biểu tượng phía trước trường văn bản. Bạn cũng có thể mở nó khi người dùng nhấp vào bên trong hộp văn bản Xem ví dụ này, trong đó chỉ có một hộp văn bản (không có biểu tượng phía trước) Sau đây là đánh dấu được sử dụng 1 2 3 4 5 6 7 8 9 10 11 Ví dụ sau đây cho thấy việc sử dụng bộ chọn ngày giờ ở dạng Bootstrap. Biểu mẫu đăng ký demo chứa một số trường khác cùng với trường ngày/giờ sinh (ví dụ: chỉ mục đích). Đối với điều đó, tôi đã sử dụng plug-in như trong các ví dụ trên Xem code và demo trực tuyến In the màu nền. #2B6D8D;
màu. #fff;
}
Tôi chỉ trình bày điều này cho mục đích trình diễn. Đối với nhu cầu khớp bộ chọn ngày giờ với phần còn lại của trang web, bạn phải chọn các lớp liên quan khác như cho ngày hiện tại, ngày đã chọn, tiêu đề khác, ngày bị vô hiệu hóa, v.v. Một bản demo phong cách khác có ghi đè nhiều thuộc tính hiển thị hơnTrong bản demo này, tôi đã thay đổi thêm một vài thuộc tính bao gồm nền và màu chính riêng biệt so với phần ngày/giờ. Ngày hiện tại cũng được thay đổi. Xem bản trình diễn theo sau bởi các lớp được sử dụng để sửa đổi các thuộc tính này Các lớp sau được ghi đè Đối với lịch chính và đồng hồ 1 2 3 4 5 6 7 8 9 10 11 12 13 bảng bootstrap-datetimepicker-widget td,
.bootstrap-datetimepicker-widget table th {
căn chỉnh văn bản. trung tâm;
bán kính đường viền. 0px;
màu nền. #8E4F35;
màu. #fff;
} Đối với phần ngày 1 2 3 4 5 6 7 8 9 10 11 12 13 .bootstrap-datetimepicker-widget table td.day {
chiều cao. 20px;
chiều cao dòng. 20px;
chiều rộng. 20px;
màu nền. #CFA95F;
bán kính đường viền. 50%;
} Di chuột các yếu tố khác nhau 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 bảng bootstrap-datetimepicker-widget td. ngày. bay lượn,
bảng bootstrap-datetimepicker-widget td. giờ. bay lượn,
bảng bootstrap-datetimepicker-widget td. phút. bay lượn,
.bootstrap-datetimepicker-widget table td.second:hover {
nền. #FF7F32;
con trỏ. con trỏ;
màu. #fff;
} Tiết học hôm nay 1 2 3 4 5 6 7 .bootstrap-datetimepicker-widget table td.today {
vị trí. tương đối;
nền. #FF7F32;
} Các bước để thiết lập plug-in datetimepicker BootstrapĐể sử dụng plug-in này trong các dự án của bạn, bạn phải đưa một vài thư viện vào các trang web của mình. Sử dụng các liên kết CDN hoặc tải xuống các tệp cần thiết từ trang GitHub Đây là các liên kết CDN mà tôi đã sử dụng để trình diễn CSS
Các thư viện JS Chúng cũng bao gồm các thư viện jQuery, Bootstrap JavaScript. Bạn cũng có thể thấy liên kết của Bootstrap CSS Làm cách nào để thêm bộ chọn ngày giờ trong Bootstrap?Chuyển đổi đầu vào
. Add data-mdb-toggle="datetimepicker" to the input element to enable toggling on input click.
Làm cách nào để đặt ngày giờ hiện tại trong Bootstrap DateTimePicker?Có vẻ đơn giản. $('#startdatetime-from'). datetimepicker({ ngôn ngữ. 'vi', định dạng. 'yyyy-MM-dd hh. mm' });
Làm cách nào để đặt ngày trong Bootstrap Datepicker?Cấu hình . 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'). công cụ hẹn hò ({ startDate. '-3d' }); Làm cách nào để đặt định dạng ngày trong Bootstrap DateTimePicker?Định dạng DateTimePicker. Định dạng mặc định là chuỗi 'mm/dd/yyyy'. . yyyy-mm-dd yyyy-mm-dd hh. ii yyyy-mm-ddThh. ii yyyy-mm-dd hh. ii. ss yyyy-mm-ddThh. ii. ssZ |
