Tiện ích con Django DateInput không hiển thị bất kỳ nội dung gì ngoại trừ kiểu nhập văn bản thuần túy. Tuy nhiên, nó xác nhận đầu vào của người dùng dựa trên nhiều định dạng khác nhau, vì vậy nó không phải là vô dụng.
Hầu hết mọi người mong đợi ứng dụng hoạt động giống như công cụ chọn ngày được tìm thấy trong giao diện Quản trị Django, do đó, điều này chắc chắn hơi khó hiểu.
Có thể sử dụng AdminDateWidget trong các ứng dụng của riêng bạn, nhưng tôi khuyên bạn nên sử dụng nó. Phải mất a lot of fiddling around to make it work.
Giải pháp dễ nhất là sử dụng một cái gì đó như JQuery UI Datepicker.Đơn giản chỉ cần bao gồm trong <head>
trang của bạn:
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/redmond/jquery-ui.css" rel="Stylesheet" />
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
Sau đó, ở phía dưới, đặt dòng sau để kích hoạt datepicker trên các yếu tố đầu vào của bạn:
<script type="text/javascript">
$(function(){
$("#id_birthday").datepicker();
});
</script>
Bạn có thể làm nhiều hơn nữa này một chút DRY nếu bạn có nhiều trường ngày bằng cách tạo ra một widget tùy chỉnh trong bạn forms.py
:
class JQueryUIDatepickerWidget(forms.DateInput):
def __init__(self, **kwargs):
super(forms.DateInput, self).__init__(attrs={"size":10, "class": "dateinput"}, **kwargs)
class Media:
css = {"all":("http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/redmond/jquery-ui.css",)}
js = ("http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js",
"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js",)
Xác định mỗi trường ngày nên sử dụng tiện ích này trong f của bạn orms:
birthday = forms.DateField(label="Birthday", widget=JQueryUIDatepickerWidget)
Và trong mẫu của bạn, bao gồm những điều sau đây trong <head>
:
{{form.media}}
Và kích hoạt datepicker cho tất cả các lĩnh vực bằng cách đặt sau ở dưới cùng của trang:
<script type="text/javascript">
$(function(){
$(".dateinput").datepicker();
});
</script>
Bạn có thể làm rõ? Toàn bộ biểu mẫu không hiển thị hay chỉ là trường DateTime? – David
Các biểu mẫu và 'đầu vào' xuất hiện. Widget lịch của nó không có. – Tom
Khi tôi đọc tiện ích DateInput, tôi cũng mong đợi một điều khiển bộ chọn ngày đồ họa (như trong quản trị django). Tuy nhiên, tôi đoán nó chỉ là một hộp văn bản đơn giản. Không phải IMO trực quan. – User