Tạo Date range picker với bootstrap datepicker

Hôm nay mình phải làm 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, yêu cầu là ngày CheckIn phải lớn hơn hoặc bằng ngày hiện tại, và ngày CheckOut phải lớn hơn ngày CheckIn, không cho phép chọn ngược về quá khứ. Yêu cầu có vậy thôi nhưng mò phát khùng mất 1 buổi, và mò ra rồi nên share cho bạn nào cần copy luôn phát cho nhanh

1. Chuẩn bị

Các bạn cần download thư viện bootstrap tại đây, và Datepicker tại đây

2. Css

Ở phần <head> của trang, ta thêm 2 thư viện css của bootstrap & datepicker vào

<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

Tiếp theo 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à xong rồi, các bạn có thể xem demo hoặc download mã người dưới đây

Demo   Download

Các bạn có thể xem thêm chi tiết hơn tại đây

Related Post


JavaScript – Chàng hiệp sĩ toàn năng
Tuesday, May 3, 2016
Khởi nguồn từ giữa những năm 1990, qua 20 năm tồn tại và phát triển, Javascript đã có những thay đổi lớn để thích nghi với thời cuộc, và bây giờ trở thành một ngôn ngữ toàn năng, thiết yếu và phù hợp đối với bất cứ một nhà phát triển nào. Với ý tưởng ban đầu là tạo ra một ngôn ngữ thông dịch tích hợp vào trình duyệt nhằm tăng tính tương tác của người dùng với trang web, với sự mềm dẻo của mình thì ngày nay Javascript đã làm được nhiều điều hơn thế, chúng ta thử điểm lại những miếng võ mà chàng hiệp sĩ này có thể triển khai nhé.
Tích hợp bộ gõ tiếng việt mudim vào website
Wednesday, September 10, 2014
Gần đây mình có được khách hàng yêu cầu tích hợp chức năng gõ tiếng việt trực tiếp vào website, tức không cần cài unikey vẫn gõ tiếng Việt được trên website của họ. Sau khi mò mẫn trên google mình tìm được một bộ gõ này khá hay và muốn chia sẻ với bạn nào cần dùng.
Search

Đăng ký nhận bài mới


Category

Blog Archive