jquery datepicker not display on my django project
I am trying to display a datepicker on my web little project with the help of django frame. The case is that when I do the request to my page it displays everithing ok, but the datepicker calendar do not pop-up.
Could you help me? My code is:
My class:-----------------------------------------------------------------------------------
class clientcheckform(ModelForm):
class Meta:
model = client
fields = ('checkin',)
widgets = {
'checkin': forms.DateTimeInput(format='%d%m%Y',attrs={
'class':'input',
'readonly':'readonly',
'size':'15',
})
}
My view.py --------------------------------------------------------------------------------
def index(request):
client_check = clientcheckform()
template = loader.get_template('booking/index.html')
context = Context({
'client_check': client_check,
})
return HttpResponse(template.render(context))
To display I am using this template:---------------------------------------------------
<p><b></br>Select CheckIn Day: </b></p>
<head>
<link type="text/css" href="/media/css/jquery-ui-1.8.16.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="/media/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/media/js/jquery-ui-1.8.16.custom.min.js"></script>
<script开发者_如何学运维 type="text/javascript">
jQuery(function() {
jQuery('#checkin').datepicker({ dateFormat: 'dd/mm/yy' });
});
</script>
</head>
{{client_check}}
I would greatly appreciate your help. Thanks. Victor.
Mistake is on jquery function. Your date fields class is 'input', then jquery should be something like:
$(function() {
$(".input").datepicker({ dateFormat: 'dd/mm/yy' });
If anyone else is following this trail, I had this same issue and resolved it. Like the original poster, I was loading the JS in the <head><script> section. It worked when I moved it out of that section and placed it at the bottom of the HTML
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/flick/jquery-ui.css" />
<script>
$(function() {
$( ".datePicker" ).datepicker(); # change ".datePicker" to match your code
});
</script>
"jQuery is not defined" means jQuery.js is not loaded.
From looking at your code, it is probably one of the following two reasons:
- The incorrect HTML markup. Try to take away the
<head>tag around<script>and<link>. - The jQuery file included has incorrect path or the file itself is corrupted. Try to replace
/media/js/jquery-1.6.2.min.jswithhttp://code.jquery.com/jquery-1.6.4.min.jsand see if this fixes the problem. If it does, there is something wrong with your jQuery file.
加载中,请稍侯......
精彩评论