Trong quá trình phát triển các ứng dụng web, chức năng cho phép người dùng chọn một khoảng thời gian cụ thể là yêu cầu thường xuyên xuất hiện. Plugin Date Range Picker dành cho jQuery cung cấp giải pháp hiệu quả để xử lý tác vụ này, hỗ trợ đa ngôn ngữ và dễ dàng tùy biến giao diện. Bài viết này trình bày quy trình kỹ thuật để đưa thành phần này vào dự án từ bước cài đặt đến cấu hình chi tiết.

Yêu Cầu Về Môi Trường Và Thư Viện

Để plugin hoạt động ổn định, dự án của bạn cần đảm bảo các thư viện nền tảng sau đã được tích hợp:

• jQuery phiên bản 1.7 trở lên.
• Thư viện Moment.js phiên bản 2.8.1 trở lên để xử lý logic ngày tháng.

Plugin này tương thích tốt với các trình duyệt hiện đại cũng như các phiên bản IE từ IE7.

Phương Pháp Cài Đặt

Có hai cách phổ biến để thêm thư viện vào workflow phát triển:

1. Sử dụng Package Manager (npm)

Đây là phương án tối ưu cho các dự án hiện đại sử dụng quy trình build tự động:

npm install jquery-date-range-picker --save

2. Tích Hợp Thủ Công

Nếu không sử dụng npm, bạn có thể tải mã nguồn về và tự xây dựng:

git clone https://github.com/longbill/jquery-date-range-picker
cd jquery-date-range-picker
npm install
gulp

Lệnh gulp sẽ thực hiện biên tập và tạo ra các file đã được nén trong thư mục dist để sẵn sàng sử dụng.

Triển Khai Trên Giao Diện

Trước khi khởi chạy script, hãy đảm bảo các tài nguyên cần thiết đã được liên kết trong trang HTML theo thứ tự sau:

1. Thư viện jQuery.
2. Thư viện Moment.js.
3. File JavaScript của plugin.
4. File CSS tương ứng (có thể biên dịch từ SCSS).

Khởi Tạo Cơ Bản

Đoạn mã dưới đây minh họa cách kích hoạt chức năng cho một ô input cụ thể với các tùy chỉnh về ngày mặc định và ngôn ngữ:

jQuery(document).ready(function($) {
  var configOptions = {
    fromDate: moment().subtract(7, 'days'),
    toDate: moment(),
    locale: 'vi',
    dateFormat: 'DD/MM/YYYY',
    selectForward: true,
    customRanges: {
      'Hôm nay': [moment(), moment()],
      'Tuần này': [moment().startOf('week'), moment().endOf('week')],
      'Tháng trước': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    }
  };

  $('#time-filter-input').daterangepicker(configOptions);
});

Lưu ý rằng biến cấu hình đã được tách riêng để dễ dàng quản lý, và bộ chọn ngày được gắn vào phần tử có ID là time-filter-input thay vì chọn theo tên thuộc tính.

Tùy Chỉnh Giao Diện Người Dùng

Plugin sử dụng SCSS để quản lý styles, cho phép developers điều chỉnh sâu về mặt thẩm mỹ. Bạn có thể can thiệp vào file daterangepicker.scss để thực hiện các thay đổi sau:

• Thay đổi bảng màu để đồng bộ với nhận diện thương hiệu.
• Điều chỉnh padding và margin để phù hợp với layout responsive.
• Sửa đổi style cho các ô ngày được chọn hoặc ngày hiện tại.

Sau khi chỉnh sửa, cần chạy lại lệnh biên dịch SCSS để cập nhật file CSS cuối cùng.

Xử Lý Các Vấn Đề Thường Gặp

Trong quá trình tích hợp, một số lỗi kỹ thuật có thể xảy ra cần lưu ý:

• Xung đột phiên bản: Đảm bảo không có nhiều phiên bản jQuery hoặc Moment.js khác nhau được tải trên cùng một trang, điều này có thể gây lỗi logic ngày tháng.
• Lỗi hiển thị CSS: Nếu giao diện bị vỡ, hãy kiểm tra lại đường dẫn dẫn đến file style và đảm bảo file CSS đã được biên dịch đúng cách từ nguồn SCSS.