Có thể bạn đã từng gặp trường hợp như thế này, 1 chức năng nhỏ trong quá trình tìm kiếm, trong đó có 2 tùy chọn chọn ngày CheckIn & CheckOut sử dụng Datepicker và bạn nghĩ ngay phải tạo Date Range Picker với Bootstrap Datepicker
Yêu cầu là ngày Nhận phòng phải lớn hơn hoặc bằng ngày hiện tại, và ngày Trả phòng phải lớn hơn ngày Nhận phòng, không cho phép chọn ngược về quá khứ. Phạm vi ngày Phạm vi ngày Phạm vi ngày
Vì vậy phải xử lý như thế nào?
Tải xuống bản trình diễn
1. Chuẩn bị
Các bạn cần tải xuống thư viện Bootstrap và Datepicker
2. css
Ở phần của trang, ta thêm 2 thư viện Css của Bootstrap & Datepicker
3. Html
Về html ta chỉ cần 2 cái input text để dùng checkin & checkout
Check In: | Check Out: |
4. Javascript [jQuery]
Bạn cần thêm 3 cái tệp js vào cuối trang nữa, trên thẻ đóng
Và đ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
Có thể bạn đã từng gặp trường hợp như thế này, 1 chức năng nhỏ trong quá trình tìm kiếm, trong đó có 2 tùy chọn chọn ngày CheckIn & CheckOut sử dụng Datepicker và bạn nghĩ ngay phải tạo Date Range Picker với Bootstrap Datepicker
Yêu cầu là ngày Nhận phòng phải lớn hơn hoặc bằng ngày hiện tại, và ngày Trả phòng phải lớn hơn ngày Nhận phòng, không cho phép chọn ngược về quá khứ. Phạm vi ngày Phạm vi ngày Phạm vi ngày
Vì vậy phải xử lý như thế nào?
Tải xuống bản trình diễn
1. Chuẩn bị
Các bạn cần tải xuống thư viện Bootstrap và Datepicker
2. css
Ở phần của trang, ta thêm 2 thư viện Css của Bootstrap & Datepicker
3. Html
Về html ta chỉ cần 2 cái input text để dùng checkin & checkout
Check In: | Check Out: |
4. Javascript [jQuery]
Bạn cần thêm 3 cái tệp js vào cuối trang nữa, trên thẻ đóng
Và đ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
Chắc chắn có rất nhiều bạn sử dụng thư viện hoặc plugin để tạo datepicker như jQuery, Boostrap,… Nhưng bạn cũng hiểu rằng chúng ta sẽ không sử dụng hết tính năng trong thư viện/plugin gây lãng phí tài nguyên. Vì vậy trong bài viết này sharescript sẽ hướng dẫn cách tạo datepicker chỉ sử dụng css và javascript
Mình đã nén source và share ở link download cuối bài viết, các bạn có thể kéo xuống dưới tải code về trước sau đó đọc bài viết cho dễ hiểu hơn
Create datepicker menu
1] Tạo chỉ mục tệp. html
Date Picker OptionsDate Picker Options
window.addEventListener["load", function[]{ picker.attach[{ target: "input-opt", container: "pick-opt", disableday : [2, 7], // DISABLE TUE, SUN startmon: true // WEEK START ON MON }]; }];
2] Tạo tệp dp-dark. css
/* [A] POPUP */ .picker-wrap { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba[0,0,0,0.5]; opacity: 0; visibility: hidden; transition: opacity 0.2s; } .picker-wrap.show { opacity: 1; visibility: visible; } .picker-wrap .picker { margin: 50vh auto 0 auto; transform: translateY[-50%]; } /* [B] CONTAINER */ .picker { max-width: 300px; border: 1px solid #000; background: #444; padding: 10px; } /* [C] MONTH + YEAR */ .picker-m, .picker-y { width: 50%; padding: 5px; box-sizing: border-box; font-size: 16px; } /* [D] DAY */ .picker-d table { color: #fff; border-collapse: separate; width: 100%; margin-top: 10px; } .picker-d table td { width: 14.28%; /* 7 EQUAL COLUMNS */ padding: 5px; text-align: center; } /* HEADER CELLS */ .picker-d-h td { font-weight: bold; } /* BLANK DATES */ .picker-d-b { background: #4e4e4e; } /* TODAY */ .picker-d-td { background: #d84f4f; } /* PICKABLE DATES */ .picker-d-d:hover { cursor: pointer; background: #a33c3c; } /* UNPICKABLE DATES */ .picker-d-dd { color: #888; background: #4e4e4e; }
3] Tạo công cụ ghi ngày tháng cho tệp. js
________số 8Tùy chọn chỉ mục tệp. html
ngày vô hiệu hóa. [2, 7] . Không cho người dùng chọn ngày thứ 3 và chủ nhật, ví dụ [1, 5] sẽ là thứ 2 và thứ 6
bắt đầu. đúng . Tuần được bắt đầu từ thứ 2, nếu đổi giá trị thành false thì tuần bắt đầu từ chủ nhật
Và còn rất nhiều tính năng khác mà bạn có thể tự khám phá
[khungdownload manguon=”” redirectbanggi=”sharescript-redirect” tenfilezip=”js-datepick. zip” linkbutton1=”https. //lái xe. Google. com/file/d/1txeDtUpuNer3CN5uJgl_FFEwjQdAe7q-/view?usp=sharing” tenbutton1=”Ổ đĩa liên kết” linkbutton2=”https. //siêu cấp. nz/file/k0Z2gBRC#9TJvD2MDERMF-m872zw_ePMNVx2JE0P1g1R5CrbQ778″ tenbutton2=”Link mega”]