Author Archives: Vương Thị Nga

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!

TẠO MỘT DIALOG “SIÊU TỐC” BẰNG JQUERY UI

1. jQuery UI là gì?

jQuery UI là giao diện người dùng chính thức thư viện jQuery (như chúng ta đã biết jQuery là một thư viện javascript rất phổ biến) . Nó cung cấp sự tương tác, các widget, hiệu ứng, popup, dialog và đề tài cho việc tạo ra các ứng dụng Internet phong phú. Hơn nữa jQuery UI là thư viện miễn phí, phần mềm mã nguồn mở.

Hình ảnh dưới đây là ví dụ về 1 dialog tạo bởi jQuery UI.

Hoặc đây là một ví dụ khác về datepicker tạo bởi jQuery UI

2. Các sử dụng jQuery UI.

Tương tự như việc sử dụng thư viện jQuery thì để sử dụng được thư viện jQuery UI việc đầu tiền ta phải làm là tải các thư viện về. Bạn có thể tải tại link: https://jqueryui.com/download/all/

Khi tải được thư viện về rồi thì chúng ta bắt đầu làm một ví dụ tạo một dialog đơn giản bằng jQuery UI thôi. Let’s go! =))

3. Ví dụ tạo dialog bằng jQuery UI

B1: Nhúng các file thư viện đã tải vào file .html

Có 3 file cần nhúng vào đó là:

B2: Tạo 1 button và 1 dialog để khi nhấn vào button thì dialog của chúng ta hiện ra.

Lưu ý là div chứa dialog ban đầu chúng ta sẽ để display : none. Các bạn có để ý hàm openDialog() ở thẻ button không? Đó là hàm sử dụng jQuery UI để gán sự kiện khi ta click vào button thì dialog của chúng ta sẽ hiện ra. Chúng ta cùng tạo hàm openDialog() ngay thôi!

B3: Tạo function có tên openDialog() để gán sự kiện mở dialog cho button.

SouceCode hoàn chỉnh:

Kết quả:

Trong hàm open openDialog do chúng ta viết thì ta có sử dụng hàm dialog(), đây là hàm có sẵn trong jQuery UI, hàm này có chức năng mở dialog và có một số option để ta có thể custom lại dialog ví dụ như (title, width, height..).

Giải thích một số option:

  • title: “Học jQuery UI” : gán tiêu đề cho dialog.
  • modal: true : đặt giá trị modal là true để các mục khác của trang web sẽ bị vô hiệu hóa dồng thời tạo một lớp phủ màu xám che cả trang web ngoại trừ dialog.
  • width: 400 : Đặt độ rộng cho dialog, ở đây mình đặt là 400px nhưng lưu ý chỉ ghi là 400 không chữ “px” nhé.
  • height: 500 : Tương tự như thuộc tính width.
  • dialogClass: “className” : dialogClass cho phép bạn chúng ta thêm class do mình tự định nghĩa vào dialog.

Còn rất nhiều các option khác ngoài những option cơ bản mình vừa liệt kê trên để chúng ta có thể custom cho dialog. Các bạn có thể tham khảo thêm các option tại đây: https://api.jqueryui.com/dialog/

4. Kết luận.

Trên đây là mình đã giới thiệu cho các bạn về jQuery UI, cách sử dụng jQuery UI để tạo một dialog đơn giản. Ở các bài sau mình sẽ giới thiệu cho các bạn cách