Menu
django newbie here. I have an attempt of a registration page.
It consists of text fields (name, username, password, etc) and a DateField (birthday).
I'm trying to use a forms.DateTimeInput widget for the DateField, but when the page is rendered, nothing happens. Am i doing something wrong? Does this have something im overlooking? It seems pretty simple, but i cant get it to work.
This is my form
class RegisterForm(forms.Form):
username = forms.CharField(max_length= 50)
password = forms.CharField(label=u'Password',widget = forms.PasswordInput(render_value=False))#password
birthday = forms.DateField(required=False,initial=datetime.date.today,widget = forms.DateTimeInput())#25 Oct 2006
And my very simple HTML
<form action="" method = "POST">
{{ form.as_p}}
<input type='Submit' value='Register'/>
</form>
999
The Django DateInput widget doesn't render anything but a plain text input. It does however validate the user's input against a variety of formats, so it's not useless.
Most people would expect it to behave in the same way as the date picker found in the Django Admin interface, so it's definitely a little confusing.
It is possible to use the AdminDateWidget in your own apps, but I would advise against it. It takes a lot of fiddling around to make it work.
The easiest solution is to use something like the JQuery UI Datepicker. Simply include the following in the <head> of your page:
<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>
Then at the bottom, put the following line to activate the Datepicker on your input elements:
<script type="text/javascript">
$(function(){
$("#id_birthday").datepicker();
});
</script>
You can make this a little more DRY if you have many date fields by creating a custom widget in your 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",)
Specify each date field should use this widget in your forms:
birthday = forms.DateField(label="Birthday", widget=JQueryUIDatepickerWidget)
And in your template, include the following in the <head>:
{{form.media}}
And activate the Datepicker for all fields by putting the following at the bottom of the page:
<script type="text/javascript">
$(function(){
$(".dateinput").datepicker();
});
</script>
calendar date selector is not part of forms framework.
You can however use jQuery date selector widget
<script type="text/javascript" src="{{ MEDIA_URL }}js/jquery-min.js"></script>
<!-- give correct location for jquery.js -->
<script type="text/javascript" src="{{ MEDIA_URL }}js/jquery-ui-min.js"></script>
<!-- give correct location for jquery-ui.js -->
<script type="text/javascript">
jQuery(function() {
jQuery("#id_birthday").datepicker({ dateFormat: 'yy-mm-dd' });
});
</script>
<form method="post">
{{ form.as_p }}
<input type="submit" value="Create Phase" />
</form>
On clicking/selecting the birthday textbox, it will show a calendar selector widget
Please give correct location of your jquery.js and jquery-ui.js
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
