Hướng dẫn Code Date Range Picker với Bootstrap Datepicker

Mã giảm giá AZDIGI

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

Tổng hợp một số hàm xử lý chuỗi hữu ích trong SQL
Khuyến mãi HostVN cực khủng VPS, Hosting -50%, Tên miền 15k
8 thủ thuật cực hay trên iPhone có thể bạn chưa biết

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

Hướng dẫn Code Date Range Picker với Bootstrap Datepicker

Vậy phải xử lý như thế nào? Sau đây là cách giải quyết:

1. Chuẩn bị:

Các bạn cần download thư viện Bootstrap, và Datepicker

2. Css:

Ở phần <head> của trang, ta thêm 2 thư viện Css của Bootstrap & Datepicker

<link href="datepicker/css/bootstrap.min.css" rel="stylesheet" />
<link href="datepicker/css/datepicker.css" rel="stylesheet" />

3. Html:

Về html ta chỉ cần 2 cái input text để dùng làm checkin & checkout

<table class="table">
   <tr>
      <td>Check In:</td>
      <td>
         <input type="text" id="timeCheckIn" class="form-control" />
      </td>
      <td>Check Out:</td>
      <td>
         <input type="text" id="timeCheckOut" class="form-control" />
      </td>
    </tr>
</table>

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 </body>

<script src="datepicker/js/jquery.min.js"></script>
<script src="datepicker/js/bootstrap.min.js"></script>
<script src="datepicker/js/bootstrap-datepicker.js"></script>

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:

<script>
    $(function () {
        'use strict';
        var nowTemp = new Date();
        var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);

        var checkin = $('#timeCheckIn').datepicker({
            onRender: function (date) {
                return date.valueOf() < now.valueOf() ? 'disabled' : '';
            }
        }).on('changeDate', function (ev) {
            if (ev.date.valueOf() > checkout.date.valueOf()) {
                var newDate = new Date(ev.date)
                newDate.setDate(newDate.getDate() + 1);
                checkout.setValue(newDate);
            }
            checkin.hide();
            $('#timeCheckOut')[0].focus();
        }).data('datepicker');
        var checkout = $('#timeCheckOut').datepicker({
            onRender: function (date) {
                return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
            }
        }).on('changeDate', function (ev) {
            checkout.hide();
        }).data('datepicker');
    });
</script>

Vậy là ok, các bạn có thể xem Demo hoặc Download mã nguồn dưới đây. Chúc các bạn thành công!

View demo   Download source

via Thuy.vk’s blog

Chia sẻ bài viết với:

COMMENTS

WORDPRESS: 0
Sunwah PearlHồ Tràm CoastarCoastar Hồ TràmCoastar EstatesKhu dân cư Nguyễn BìnhKDC Nguyễn BìnhDự án Nguyễn BìnhNam Việt ÁNine SouthĐất Hòa XuânĐất nền Hòa XuânDat Hoa XuanDat nen Hoa Xuan