Share Chọn ngày giờ chuyên nghiệp với thư viện Pickadate.js

filiallion · 04/12/2018

Đối với các trường nhập liệu là ngày giờ thì thường yêu cầu người dùng nhập đúng định dạng ngày giờ, đ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ẽ không cảm thấy thoải mái khi phải nhập ngày giờ 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 cho người dùng, tôi khuyên các bạn sử dụng thư viện Pickadate.js để tạo một bộ chọn ngày giờ cho người dùng chọn mà không cần phải quan tâm tới nhập đúng định dạng mà website yêu cầu vì thư viện đã tự động định dạng.

Để sử dụng thư viện Pickadate.js các bạ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.

Các bạn tải thư viện Pickadate.js tại địa chỉ http://amsul.ca/pickadate.js.

Bộ thư viện Pickadate.js chia ra ngày và giờ thành 2 tập tin riêng biệt, với bài viết này tôi sẽ tích hợp cả 2 chức năng ngày và giờ để các bạn có thể dễ dàng sử dụng khi cần thiết. Các bạn tham khảo nội dung mã lệnh tích hợp thư viện Pickadate.js như sau:

HTML:

<link href="path/to/default.css" rel="stylesheet">
<link href="path/to/default.date.css" rel="stylesheet">
<link href="path/to/default.time.css" rel="stylesheet">
<script src="path/to/picker.js"></script>
<script src="path/to/picker.date.js"></script>
<script src="path/to/picker.time.js"></script>
<script src="path/to/legacy.js"></script>

Ví dụ để tích hợp bộ chọn ngày vào trường sau:

HTML:

<input type="text" name="pickadate-js" class="pickadate-js">

Các bạn khai báo nội dung mã lệnh như sau:

JavaScript:

$(function() {
    $('.pickadate-js').pickadate();
});

Các bạn có thể tìm hiểu thêm về thư viện Pickadate.js tại địa chỉ http://amsul.ca/pickadate.js.

Share Chọn ngày giờ chuyên nghiệp với thư viện Pickadate.js

filiallion

Administrator