CUSTOM LẠI JQUERY UI DATEPICKER

Xin chào các bạn! Ở bài trước mình đã giới thiệu cho các bạn về thư viện jQuery UI và cách sử dụng nó để tạo một dialog đơn giản. Hôm nay mình sẽ giới thiệu cho các bạn cách tạo datepicker bằng jQuery UI và custom lại datepicker theo ý muốn. Let’s gooo!!!!

Datepicker

1. Tạo datepicker sử dụng jQuery UI

Trước khi bắt đầu code thì các bạn hãy nhúng các file thư viện jQuery UI, jQuery theo đúng thứ tự nhé! Mình bắt đầu code thôi!

B1: Tạo một thẻ input để nhập ngày

  • Trong hình trên, phần khoanh màu xanh chính là thư viện và thứ tự nhúng các file thư viện.
  • Phần màu đỏ là thẻ input cần tạo mình đã nêu ở bước 1.

B2: Viết hàm javascript sử dụng jQuery để tạo datepicker.

Để tạo datepicker bạn chỉ cần chọn “.selector” và sử dụng hàm datepicker(): được cung cấp sẵn bởi jQuery UI. Cụ thể là phần màu xanh như ảnh sau:

Giờ mình chạy thử nhé (click vào ô input).

Kết quả khi click input.

Kết quả đã hiện ra nhưng tất cả vẫn là mặc định và có thể bạn thấy nó chưa thực sự đẹp? Bạn muốn custom lại nó cho lung linh hơn? Ok vậy mình sẽ hướng dẫn các bạn custom lại nó nhé!!!

2. Custom lại datepicker.

Custom lại như thế nào? Đơn giản là bạn chỉ cần chỉnh lại css cho datepicker bằng cách viết một file datepicker.css để chỉnh lại css cho những class có sẵn trong thư viện jQuery UI rồi nhúng file này sau file thư viện jquery-ui.min.css để nó ghi đè css của các class này trong file thư viện.

Ví dụ dưới đây là nội dung file datepicker.css mà mình tạo để css lại cho các class có sẵn trong thư viện như (.ui-datepicker-header, .ui-datepicker-prev, .ui-datepicker…).

.ui-datepicker-header {
    background-color: #dd5d5d;
    color: #fff;
}

.ui-datepicker-prev, .ui-datepicker-next {
    background-color: #dd5d5d;

}
    .ui-datepicker-prev:hover {
       background: url('/Contents/images/Arrows-Back-icon.png') no-repeat 5px 6px;
       background-size: 16px;
        border: none;
        cursor: pointer;
    }

    .ui-datepicker-next:hover {
        background: url('/Contents/images/Arrows-Forward-icon.png') no-repeat 10px 6px;
        background-size: 16px;
        border: none;
        cursor: pointer;
    }

    .ui-datepicker-prev span, .ui-datepicker-next span {
        color: #fff;
    }

    .ui-datepicker{
        padding: 0;
    }
.ui-datepicker-next {
    background: url('/Contents/images/Arrows-Forward-icon.png') no-repeat 10px 6px;
    background-size: 16px;
}

.ui-datepicker-prev {
    background: url('/Contents/images/Arrows-Back-icon.png') no-repeat 5px 6px;
    background-size: 16px;
}

.ui-datepicker table {
    border-collapse: collapse;
    border: none;
}

    .ui-datepicker table thead{
        background-color: #e5e5e5;
    }

    .ui-datepicker table tbody td .ui-state-default {
        border: none;
        background-color: #fff;
        text-align: center;
        padding: 5px;
        margin: 0;
    }
        .ui-datepicker table tbody td .ui-state-default:hover {
            background-color: #dd5d5d;
            border-radius: 3px;
            color: #fff;
        }

.ui-datepicker-year, .ui-datepicker-month {
    background-color: #dd5d5d;
    border: none;
    color: #fff;
}

.ui-datepicker table tbody td .ui-state-active {
    background-color: #ac1212;
    border-radius: 3px;
}

Giờ chỉ việc nhúng file này vào trang web và chạy thử để xem kết quả nhé!

3. Kết luận.

Vậy là mình đã hướng dẫn các bạn tạo và custom lại datepicker. Thật đơn giản phải không nào, các bạn hoàn toàn có thể custom lại datepicker đẹp lung linh như ý muốn. Chúc các bạn thành công!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *