Share Chọn ngày để nhập với thư viện jQuery UI Datepicker

filiallion · 04/18/2018

Đối với các trường nhập liệu là ngày thì thường yêu cầu người dùng nhập đúng định dạng ngày, điều này phần nào làm khó cho người dùng và phần lớn người dùng sẽ cảm thấy không thoải mái khi phải nhập theo yêu cầu và cũng phần nào làm giảm đi sự chuyên nghiệp của website. Để thuận tiện hơn cho người dùng, tôi giới thiệu với các bạn thư viện jQuery UI Datepicker để tạo một bảng chọn ngày trực quan cho người dùng. Thư viện jQuery UI Datepicker là một thành phần trong bộ thư viện jQuery UI được sử dụng phổ biến hiện nay.

Để sử dụng thư viện jQuery UI các bạn cần phải tích hợp thư viện jQuery. Các bạn tải thư viện jQuery tại địa chỉ http://jquery.com/download. Ngoài ra, trong gói thư viện jQuery UI cũng đã có sẵn thư viện jQuery để các bạn tích hợp.

Các bạn tải gói thư viện jQuery UI tại địa chỉ http://jqueryui.com/download. Tại trang tải thư viện, các bạn có thể chọn các thành phần mà các bạn cần dùng cũng như chọn mẫu giao diện các bạn muốn sử dụng.

Các bạn tích hợp thư viện jQuery UI vào website với nội dung mã lệnh như sau:

HTML:

<link href="path/to/jquery-ui.min.css" rel="stylesheet">
<script src="path/to/jquery-ui.min.js"></script>

Và cài đặt thư viện jQuery UI Datepicker với nội dung mã lệnh như sau:

JavaScript:

$(function() {
    $('#datepicker').datepicker();
});

Sau đó để tạo bảng chọn ngày các bạn tham khảo ví dụ sau:

HTML:

<input type="text" name="datepicker" id="datepicker">

Các bạn có thể tìm hiểu thêm về thư viện jQuery UI Datepicker tại địa chỉ http://jqueryui.com/datepicker.

Share Chọn ngày để nhập với thư viện jQuery UI Datepicker

filiallion

Administrator