Tag Archives: datepicker

CUSTOM DATEPICKER SANG TIẾNG VIỆT

Hi guys! Ở bài trước mình đã giới thiệu cho các bạn biết cách custom lại UI datepicker sao cho đẹp hơn. Nhưng datepicker mặc định là tiếng anh nên ở bài này mình sẽ hướng dẫn các bạn custom lại datepicker sang tiếng việt nhé!

Datepicker English version

Hướng dẫn

Như các bạn đã biết jQuery UI cung cấp cho chúng ta rất nhiều widget như: dialog, datepicker, autocomplete,.. Không những vậy jQuery UI còn cung cấp cho chúng ta các tùy chọn để chúng ta custom lại một số thuộc tính cho nó.

Không nói nhiều nữa, bắt đầu code thôi!

$('#datepicker').datepicker({
            prevText: "Trước",
            nextText: "Sau",
            currentText: "Hôm nay",
            monthNames: ["Tháng một", "Tháng hai", "Tháng ba", "Tháng tư", "Tháng năm", "Tháng sáu", "Tháng bảy", "Tháng tám", "Tháng chín", "Tháng mười", "Tháng mười một", "Tháng mười hai"],
            monthNamesShort: ["Một", "Hai", "Ba", "Bốn", "Năm", "Sáu", "Bảy", "Tám", "Chín", "Mười", "Mười một", "Mười hai"],
            dayNames: ["Chủ nhật", "Thứ hai", "Thứ ba", "Thứ tư", "Thứ năm", "Thứ sáu", "Thứ bảy"],
            dayNamesShort: ["CN", "Hai", "Ba", "Tư", "Năm", "Sáu", "Bảy"],
            dayNamesMin: ["CN", "T2", "T3", "T4", "T5", "T6", "T7"],
            weekHeader: "Tuần",
            dateFormat: "dd/mm/yy",
            firstDay: 1,
            showMonthAfterYear: false,
        });

Giải thích:

  • nextText: Đặt text cho button next trên tiêu đề hiển thị tháng, năm cho khi hover vào button.
  • prevText: Đặt text cho button previous trên tiêu đề hiển thị tháng, năm cho khi hover vào button.
  • monthNames: Danh sách tên đầy đủ của tháng, được hiển thị trên tiêu đề tháng, năm.
  • monthNamesShort: Danh sách các tên tháng được viết tắt, như được sử dụng trong tiêu đề tháng trên mỗi datepicker và theo yêu cầu thông qua tùy chọn “dateFormat”.
  • dayNamesMin: Danh sách các tên ngày viết tắt, bắt đầu từ Chủ nhật, để sử dụng làm tiêu đề cột trong datepicker.
  • dayNames: Danh sách tên các ngày trong tuần, được sử dụng là yêu cầu trong tùy chọn “dateFormat”, ngoài ra nó được hiển thị khi bạn hover vào tên viết tắt của các ngày trong tuần.
  • weekHeader: Text để hiển thị cho tuần của cột tiêu đề năm.
  • dateFormat: Định dạng ngày hiển thị, mặc định là mm/dd/yy.
  • firstDay: Ngày hiển thị đầu tiên trên tiêu đề ngày, chủ nhật = 0, thứ hai = 1,..
  • showMonthAfterYear: Text hiển thị tháng sau năm trên tiêu đề nếu giá trị là true và ngược lại.

Ok! Giờ mình cùng xem kết quả nha!!!

Datepicker Vietnamese version

Trên đây chỉ là một số các tùy chọn mà jQuery cung cấp, vẫn còn rất nhiều tùy chọn khác các bạn có thể tự tìm hiểu thêm qua https://api.jqueryui.com/datepicker/ nhé!

Vậy là mình đã giới thiệu cho các bạn cách custom lại datepicker sang tiếng việt, thật đơn giản phải không nào. Chúc các bạn học tốt!

Kết luận

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!