2012-03-07 30 views
13

Một số mô hình Django 1.3 của tôi có các thuộc tính DateField. Khi một biểu mẫu được tạo, tôi muốn sử dụng jQuery UI Datepicker thay vì một trường văn bản thuần túy. Tôi hiểu rằng tôi có thể tạo ra các vật dụng mới nhưng tôi không hiểu làm thế nào. Ngoài ra, tôi không chắc chắn nếu bất cứ điều gì như thế này đã được thực hiện cho Django (tôi googled nó, không có cơ hội).Làm thế nào để sử dụng jQuery UI Datepicker như một Widget Django?

Làm thế nào để tạo một Widget Django mà tôi có thể tái sử dụng trên nhiều mô hình (và trang) cho jQuery UI Datepicker?

Trả lời

0

Bạn nên xem trên DateInput - bạn sẽ cần phải kế thừa tiện ích của mình từ đó. Ngoài ra, hãy xem admin widgets - có một số JS được thêm vào. Vì vậy, lấy DateInput, thêm một số JS và bạn đã hoàn tất.

11

JQueryUI có bộ chọn giao diện người dùng ngày rất tốt. Bạn có thể lấy nó ở đây: http://jqueryui.com

Nói ví dụ bạn có dạng sau:

class DateForm(forms.Form): 
    myDate = forms.DateField() 

Từ đây bạn có muốn để ràng buộc ngày phụ tùng JQuery đến lĩnh vực của bạn từ bên trong mẫu của bạn.

Tôi giả định ở đây bạn đang chuyển số DateForm vào mẫu của bạn và (các) đường dẫn tới JQuery là chính xác.

<head> 
    <link rel="stylesheet" href="/themes/base/jquery.ui.all.css"> 
    <script src="/jquery.js"></script> 
    <script src="/ui/jquery.ui.core.js"></script> 
    <script src="/ui/jquery.ui.widget.js"></script> 
    <script src="/ui/jquery.ui.datepicker.js"></script> 
    <script> 
    $(function() { 
     $("#id_myDate").datepicker(); 
    }); 
    </script> 
</head> 
<body> 

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

</body> 

Xin lưu ý rằng myDate được trước bởi id_. Django thực hiện điều này một cách minh bạch để đảm bảo bạn khớp với nó như sau: id_myDate.

Hy vọng điều này sẽ giúp bạn.

+0

bạn có thể cho tôi biết nếu tôi đang sử dụng mẫu biểu mẫu thay vì , cách hiển thị datepicker – user2086641

+0

Tôi đã thử điều này và tôi cũng phải thêm name = "myDate "để làm cho nó hoạt động. – FrontierPsycho

+0

@ user2086641 Tôi nghĩ bạn nên loại trừ trường myDate khỏi mẫu biểu mẫu (google, thật dễ dàng) và đặt thủ công vào trang như câu trả lời gợi ý. – FrontierPsycho

Các vấn đề liên quan