Cách Làm Datepicker Bằng jquery UI

trong thời gian vừa qua tôi đã làm một dự án vé máy bay, trong quá trình tìm kiếm vé đã dùng qua datepicker. Sực nhớ hình như trong blog này của mình chưa có vấn đề này, thực ra làm không khó nhưng đối với các bạn mới vô nghề thì đây chắc chắn sẽ là một tài liệu bổ ích.

chúng ta sẽ sử dụng một plugin jquery rất quen thuộc và nổi tiếng đó là Jquery UI, đây là một thư viện rất quen thuộc đối với một coder làm web, nó chứa những ứng dụng mà các bạn hay dùng như: dialog (hiệu ứng popup khi click vào một cái gì đó và một popup sẽ hiện lên), datepicker ( dùng để hiện bảng chọn ngày tháng với nhiều tùy chọn khá thú vị) và một hàm nữa mà tôi rất thích nữa là autocomplate ( dùng để khi bạn có rất nhiều lựa chọn mà bạn không thể chứa được trong dropdown menu, nó sẽ tự động hiển thị các kết quả tương ứng khi bạn gõ bất kì ký tự nào trong textbox).

ngoài ra Jquery UI còn rất nhiều hàm khác rất hay cho các bạn khám phá, trong bài sau chắc mình sẽ hướng dẫn sử dụng autocomplate.

nào giờ chúng ta bắt đầu nhé, đầu tiên các bạn copy 3 dòng code sau đây bỏ vào trong phần header:

Source code

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

để giải thích sơ qua cho các môn đồ mới nhập môn dễ hiểu luôn nhé, dòng code đầu tiên là css cho jquery ui, dòng thứ 2 chính là thư viện jquery và đoạn cuối cùng chính là Jquery UI. Bạn có thể download 3 file này rồi lưu vào hosting của bạn hoặc bạn có thể dùng như thế này cũng được, giúp bạn tăng tốc độ tải trang web lên khá khá nếu bạn thực hiện cách này với nhiều file khác nữa.

sau đó bạn tạo một textbox như sau:

Source code

<p>Date: <input type="text" id="datepicker"></p>

textbox mang id là “datepicker” nhé

tiếp theo là phần quan trong nhất, bạn copy đoạn code jquery sau đây để vào nhé:

Source code

<script type="text/javascript">
$(function()
{
    $('.ngaydi').datepicker(
    { 
        showOn: 'button',
        buttonImage: 'images/icon/blank.png',
        buttonText: '',
        buttonImageOnly: true,
        minDate: 0,
        dateFormat: 'dd/mm/yy',
        defaultDate: +0,
        dayNamesMin: ["CN", "H", "B", "T", "N", "S", "B"],
        monthNames: ['Tháng 1', 'Tháng 2', 'Tháng 3', 'Tháng 4', 'Tháng 5', 'Tháng 6', 'Tháng 7', 'Tháng 8', 'Tháng 9', 'Tháng 10', 'Tháng 11', 'Tháng 12'],
        beforeShow: function() {
            //các functions khác nếu bạn muốn thực hiện
      }
    });
</script>

nhìn vào đoạn code trên chắc các bạn cũng hiểu ít nhiều về cách hoạt động của nó rồi đúng không? các bạn có thể thay các câu chữ của tôi theo ý thích của riêng bạn. Nếu các bạn không muốn show button ( là cái nút kế bên textbox) thì các bạn có thể bỏ bớt đoạn:

Source code

showOn: 'button',
buttonImage: 'images/icon/blank.png',
buttonText: '',
buttonImageOnly: true,

mindate: 0 là ẩn các ngày đã qua, chỉ thể hiện từ ngày hiện tại trở đi

dateFormat: ‘dd/mm/yy’ định dạng ngày tháng sau khi chọn

các biến còn lại chủ yếu là cấu hính hiển thị thôi, cái này các bạn có thể tự tìm hiểu nhé.

các bạn cso thể xem ví dụ tại đây

các thông số tùy biến của datepicker các bạn có thể xem tại đây

ngoài ra khi làm các bạn sẽ không một số lỗi về giao diện vì thiếu hình ảnh, các bạn có thể download trọn gói Jquery UI tại đây

trong đó có sẵn các file ảnh cho các bạn sử dụng. Chúc các bạn thành công, nghề code là một trong những nghề mà kiến thức học không bao giờ hết !

Tags Cloud