Tìm hiểu về daterangepicker

Cài đặt thư viện daterangepicker

Bạn vào trang web daterangepicker.com và bấm vào nút Download Zip để bấm tải thư viện của daterangepicker về và lưu vào server web của bạn.

Nếu không muốn tải về thì bạn có thể dùng trực tiếp bằng cách thêm vào mấy dòng dưới đây.

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

Thiết lập daterangpicker trên cùng một input field

Hãy tạo một file js và thêm vào nó đoạn code bên dưới.

$('.rangedatepicker').daterangepicker({
        alwaysShowCalendars: true,
        locale: {
            format: 'YYYY-MM-DD',
        },
        ranges: {
            'Today'       : [moment(), moment()],
            'Yesterday'   : [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Last 7 Days' : [moment().subtract(6, 'days'), moment()],
            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            'This Month'  : [moment().startOf('month'), moment().endOf('month')],
            'Last Month'  : [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        },
        startDate: moment().startOf('month'),
        endDate  : moment().endOf('month'),
    });

Ở trên tôi sẽ sử dụng class rangedatepicker để gọi hàm daterangepicker trong input html. Nên trong input html mà bạn muốn hiển thị daterangepicker thì bạn chỉ cần thêm vào class rangedatepicker là được.

Nhiệm vụ chính của plugin daterangepicker này dĩ nhiên là chọn khoảng thời gian nhưng ngoài ra nó còn có thể làm nhiều hơn thế. Có một số thiết lập dưới đây giúp bạn không cần phải dùng thêm bất cứ plugin nào khác trong việc hiển thị chọn ngày tháng.

Thiết lập daterangepicker có thể hiển thị ngày ở 2 input field khác nhau

Ở trên bạn chỉ có thể hiển thị date range trong một input field html duy nhất thôi, vậy muốn hiển thì ngày bắt đầu và ngày kết thúc ở 2 input field khác nhau thì chúng ta có đoạn code sau.

if($('.datepickerBegin, .datepickerEnd').length){
        // check if element is available to bind ITS ONLY ON HOMEPAGE
        var currentDate = moment().format("DD-MM-YYYY");
    
        $('.datepickerBegin, .datepickerEnd').daterangepicker({
            locale: {
                format: 'YYYY-MM-DD'
            },
            "alwaysShowCalendars": true,
            //"minDate": currentDate,
            //singleDatePicker: true,
            showDropdowns: true,
            autoApply: false,
            autoUpdateInput: false,
            ranges: {
            'Today': [moment(), moment()],
            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }
        
        }, function(start, end, label) {
        var selectedStartDate = start.format('YYYY-MM-DD'); // selected start
        var selectedEndDate = end.format('YYYY-MM-DD'); // selected end
    
        $checkinInput = $('.datepickerBegin');
        $checkoutInput = $('.datepickerEnd');
    
        // Updating Fields with selected dates
        $checkinInput.val(selectedStartDate);
        $checkoutInput.val(selectedEndDate);
    
        // Setting the Selection of dates on calender on CHECKOUT FIELD (To get this it must be binded by Ids not Calss)
        var checkOutPicker = $checkoutInput.data('daterangepicker');
        checkOutPicker.setStartDate(selectedStartDate);
        checkOutPicker.setEndDate(selectedEndDate);
    
        // Setting the Selection of dates on calender on CHECKIN FIELD (To get this it must be binded by Ids not Calss)
        var checkInPicker = $checkinInput.data('daterangepicker');
        checkInPicker.setStartDate(selectedStartDate);
        checkInPicker.setEndDate(selectedEndDate);
    
        });
    }

Và để code trên hoạt động thì ở input hiển thị ngày bắt đầu bạn thêm vào class datepickerBegin và tại input field hiển thị ngày kết thúc bạn thêm vào class datepickerEnd.

Thiết lập datepicker cho lựa chọn ngày sinh nhật

Với lựa chọn ngày sinh nhật, chúng ta sẽ có một số thiết lập khác biệt so với việc lựa chọn ngày bình thường. Có thể kể đến như việc giới hạn năm nhỏ nhất để chọn cho sinh nhật, ví dụ nhập sinh nhật nhân viên thì không ai nhập nhân viên trên 80 tuổi chẳng hạn. Lúc này ta sẽ để năm sao cho không vượt quá 80 tuổi.

$('.birthdaypicker').daterangepicker({
        singleDatePicker: true,
        showDropdowns: true,
        minYear: 1901,
        maxYear: parseInt(moment().format('YYYY'),10),
        drops: "auto",
        autoUpdateInput: false,
        locale: {
            format: 'YYYY-MM-DD',
        },
    });
    $('.birthdaypicker').on('apply.daterangepicker', function(ev, picker) {
        $(this).val(picker.startDate.format('YYYY-MM-DD'));
    });
    $('.birthdaypicker').on('cancel.daterangepicker', function(ev, picker) {
        $(this).val('');
    });

Thiết lập hiển thị datepicker cho các input field thêm vào từ javascript

Các thiết lập datepicker và daterangepicker của bạn ở trên chỉ hoạt động trong trường hợp đó là input field tĩnh, còn trường hợp input field động được bạn thêm vào bằng javascript hoặc jquery thì hoàn toàn không có tác dụng.

Lúc này bạn phải điều chỉnh đôi chút để datepicker của bạn có thể chạy với dynamic input field.

$(document).on('focus','.datepicker',function(){
        $('.datepicker').daterangepicker({
            singleDatePicker: true,
            showDropdowns: true,
            drops: "auto",
            autoUpdateInput: false,
            autoApply: true,
            locale: {
                format: 'YYYY-MM-DD',
            },
        });
        $('.datepicker').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('YYYY-MM-DD'));
        });
        $('.datepicker').on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
        });
    });

Đó là tất cả những gì daterangepicker có và nó giúp bạn không cần phải dùng thêm bất cứ plugin nào khác để làm datepicker cho input field.

You need to login in order to like this post: click here