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