Widżet Django DateInput nie wyświetla niczego poza wprowadzeniem zwykłego tekstu. Sprawdza jednak dane wejściowe użytkownika w różnych formatach, więc nie jest bezużyteczne.
Większość ludzi oczekiwałaby, że będzie się zachowywać w taki sam sposób, jak selektor dat w interfejsie administratora Django, więc jest to z pewnością trochę mylące.
Możliwe jest użycie AdminDateWidget we własnych aplikacjach, ale odradzam. Zajmuje a lot of fiddling around to make it work.
Najprostszym rozwiązaniem jest użycie czegoś takiego jak JQuery UI Datepicker.Po prostu obejmują następujące w <head>
swojej stronie:
<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>
potem na dole umieścić następującą linię do aktywacji datepicker na swoich elementów wejściowych:
<script type="text/javascript">
$(function(){
$("#id_birthday").datepicker();
});
</script>
Można zrobić to trochę więcej DRY jeśli masz wiele date pól poprzez tworzenie niestandardowych widget na swojej 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",)
określić każde pole data powinna wykorzystać ten widget w swojej f ORMs:
birthday = forms.DateField(label="Birthday", widget=JQueryUIDatepickerWidget)
A w szablonie, obejmują następujące w <head>
:
{{form.media}}
i włączyć datepicker dla wszystkich pól, umieszczając następujące u dołu strony:
<script type="text/javascript">
$(function(){
$(".dateinput").datepicker();
});
</script>
Czy mógłbyś wyjaśnić? Czy cały formularz nie renderuje się, czy tylko pole DateTime? – David
Pojawiają się formularze i "dane wejściowe". Jest to widget kalendarza, który nie robi. – Tom
Kiedy czytam widżet DateInput, też oczekiwałem graficznej kontroli wyboru daty (jak w administratorze django). Jednak myślę, że to zwykłe pole tekstowe. Nie intuicyjne IMO. – User