Hướng dẫn bootstrap-datepicker bootstrap 4
ĐĂNG KÝ TÀI 10 LÝ DO ĐỂ BẠN QUYẾT ĐỊNH CHỌN ĐĂNG KÝ TÀI KHOẢN VIP365
Có thể bạn đã từng gặp trường hợp như thế này, 1 chức năng nhỏ trong tìm kiếm, trong đó có 2 option chọn ngày CheckIn & CheckOut sử dụng Datepicker và bạn nghĩ ngay phải tạo một Date Range Picker với Bootstrap Datepicker Yêu cầu là ngày Check-in phải lớn hơn hoặc bằng ngày hiện tại, và ngày Check-out phải lớn hơn ngày Check-in, không cho phép chọn ngược về quá khứ. Date Range Date Range Date Range Vậy phải xử lý như thế nào? Sau đây là cách giải quyết: Demo Download 1. Chuẩn bị:Các bạn cần download thư viện Bootstrap, và Datepicker 2. Css:Ở phần của trang, ta thêm 2 thư viện Css của Bootstrap & Datepicker3. Html:Về html ta chỉ cần 2 cái input text để dùng làm checkin & checkout
4. Javascript (jQuery)Bạn cần thêm 3 cái file js vào cuối trang nữa, trên thẻ đóng Và một đoạn mã Js để hiện thị Datepicker và giới hạn khoảng thời gian lựa chọn theo yêu cầu đặt ra ban đầu: Vậy là ok. Chúc các bạn thành công! |