Hướng dẫn add datepicker bootstrap 4 - thêm datepicker bootstrap 4

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à DatepickerBootstrap, và Datepicker

2. Css:

Ở phần 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

<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!

Hôm nay chúng ta sẽ đi tìm hiểu cách thiết kế component timepicker bằng cách kết hợp HTML, CSS, Javascript và Bootstrap nhé.

Timepicker Là Gì?

Timepicker là một ô nhập dữ liệu trong form giúp người dùng chọn thời gian tùy vào mục đích của chúng ta. Ví dụ ở trong form đăng ký thì đa số đều bắt bạn nhập ngày, tháng, năm sinh thì đây chính là một kiểu timepicker. Nó giúp cho người dùng tiết kiệm thời gian và hạn chế tối đa việc xảy ra các lỗi cú pháp khi phải nhập bằng tay. là một ô nhập dữ liệu trong form giúp người dùng chọn thời gian tùy vào mục đích của chúng ta. Ví dụ ở trong form đăng ký thì đa số đều bắt bạn nhập ngày, tháng, năm sinh thì đây chính là một kiểu timepicker. Nó giúp cho người dùng tiết kiệm thời gian và hạn chế tối đa việc xảy ra các lỗi cú pháp khi phải nhập bằng tay.

Để hiểu rõ hơn bạn xem ví dụ về Timepicker của trang web hwww.norwegian.com dưới đây nhé:

Khi bạn thiết kế một component timepicker thì việc chúng ta quan tâm là làm sao người dùng có thể dễ dàng sử dụng nhất có thể. Ở đây bạn có thể phân tách ngày tháng năm thành ba phần riêng biệt với mỗi phần là một ô select(chọn) hay sử dụng component dropdown để hiển thị giá trị. Một lưu ý nhỏ là khi sử dụng timpicker dạng này bạn cần phải kiểm tra dữ liệu thông tin người dùng nhập vào một cách cẩn thận vì rất có thể không đúng với thực tế ví dụ như ngày 31 tháng 2. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:component timepicker thì việc chúng ta quan tâm là làm sao người dùng có thể dễ dàng sử dụng nhất có thể. Ở đây bạn có thể phân tách ngày tháng năm thành ba phần riêng biệt với mỗi phần là một ô select(chọn) hay sử dụng component dropdown để hiển thị giá trị. Một lưu ý nhỏ là khi sử dụng timpicker dạng này bạn cần phải kiểm tra dữ liệu thông tin người dùng nhập vào một cách cẩn thận vì rất có thể không đúng với thực tế ví dụ như ngày 31 tháng 2. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

Cách thứ hai là bạn có thể cho người dùng nhập vào giá trị số trong component timepicker với định dạng được bạn xác định từ trước hay cũng có thể theo hướng dẫn của bạn. Ví dụ khi bạn muốn hướng dẫn người dùng nhập ngày tháng năm theo đúng cú pháp thì có thể đặt hướng dẫn như sau: yyyy-mm-dd thì khi đó người ta sẽ hiểu là năm-tháng-ngày. Và bạn cũng nên kết hợp với calenderpicker để người dùng nhìn trên lịch có thể dễ hình dung hơn. Để hiểu rõ hơn bạn hãy xem ví dụ dưới đây nhé:yyyy-mm-dd thì khi đó người ta sẽ hiểu là năm-tháng-ngày. Và bạn cũng nên kết hợp với calenderpicker để người dùng nhìn trên lịch có thể dễ hình dung hơn. Để hiểu rõ hơn bạn hãy xem ví dụ dưới đây nhé:

Nếu bạn muốn tiết kiệm thời gian cũng như giảm các lỗi nhập sai định dạng cho người dùng thì nên sử dụng calendar(lịch). Nó giúp hiển thị trực quan các ngày tháng trong năm và thân thiện với màn hình moblie. Để hiểu rõ hơn bạn xem hình ảnh sau đây nhé:

Chúng ta cũng có thể tích hợp chọn thời gian vào trong timepicker. Nó sẽ phù hợp với một số ngữ cảnh nhất định như chúng ta muốn tạo một form đặt chuyến bay thì ngoài ngày tháng năm ra thì bạn cần biết thêm thông tin mà người dùng muốn bay. Để hiểu rõ hơn bạn xem ví dụ dưới đây nhé:

Sau khi hiểu sơ lược về timepicker thì sau đây mình sẽ giới thiệu một số Timepicker snippet giúp bạn có sự lựa chọn tốt nhất để phù hợp với mục đích cũng như thiết kế, bố cục trang web của bạn.