Subscribe Now

Trending News

Bài viết

Bootstrap, JavaScript, jQuery, Lập trình

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

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

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:

Demo Download

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. Chúc các bạn thành công!

Tổng hợp Khuyến mãi, Coupon Dediserve 2020 (Special)

Bài viết liên quan

Subscribe
Notify of
guest
1 Comment
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
Trần Nguyễn Minh Duy
Trần Nguyễn Minh Duy
1 year ago

Nếu muốn chuyển FormatDate thành dd-mm-yyyy thì làm như thế nào vậy