如何以酥脆的形式在日期字段上显示datepicker日历?

时间:2013-04-05 12:18:01

标签: python django django-models django-forms django-templates

我是django的新手。我创建了一个模型表单,显示管理员端的日历(datepicker) 像这样

enter image description here

但是当我在我的模板文件中使用那个脆弱的表单时,它只是没有datepicker的常规字段

enter image description here

我无法找到解决方案,请帮助我,这是我的代码

Model.py

class jobpost(models.Model):
item_types = (
    ('Full Time',_('Full Time')),
    ('Part Time',_('Part Time')),
    ('Contract',_('Contract')),
)

post_type= (
    ('Job',_('Job')),
    ('Classified',_('Classified')),
    ('Project/Task',_('Project/Task')),
    ('Internship',_('Internship')),

)
#user = models.ForeignKey(User)
job_id =             models.AutoField(primary_key=True)
#user = models.ForeignKey(User, editable = False)


post_type =        models.CharField(verbose_name=_('Post type'),max_length=255,null=True, choices=post_type,default='Job')
job_type =        models.CharField(verbose_name=_('Job type'),max_length=255,null=True, choices=item_types,default='Full Time')
job_location =    models.CharField(verbose_name=_('Job location'),max_length=255,null=True)
job_title =             models.CharField(verbose_name=_('Job title'),max_length=255,null=True)
job_description =       models.TextField(verbose_name=_('Job description'),null=True)
start_date =    models.DateField(verbose_name=_('Start date') ,null=True)#4 April 2013
end_date =      models.DateField(verbose_name=_('End date'),null=True)
how_to_apply =    models.CharField(verbose_name=_('How to Apply'),max_length=255,null=True)

这是我在model.py中的小部件

widgets = {

    'job_type':RadioSelect(),    
    'job_location':TextInput(attrs={'size':'70'}),   
    'job_description':Textarea(attrs={'cols':200, 'rows':10}),
        'start_date':DateInput(attrs={
            'class': 'datepicker',
            'data-date-format': 'yyyy/mm/dd', 
        }),

        'end_date':DateInput(attrs={
            'class': 'datepicker',

            'data-date-format': 'yyyy/mm/dd', 
        }),


}

这里我使用的是我的模板

<head>
{% extends "portal/site_base.html" %}
{% load crispy_forms_tags %}
<p>Step {{ step }} of {{ step_count }}</p>
{% comment %}
{% load i18n %}
{% trans "Main page of the portal." %}

{% endcomment %}
{% block content %}
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome {{ user.username }} </title>

<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">
    $(document).ready(function() {
      $('.dateinput').datepicker({ format: "yyyy/mm/dd" });
   }); 
</script>

</head>
{{ post_type_value }}
<body>

<form method="post" action="/portal/next/post/" class="blueForms" id="id-jobpostform">


{% csrf_token %}
{{ post_type_value }}
{% crispy form %}
{% if request.REQUEST.post_type %}
<input type="hidden" name="post_type" value="{{ request.REQUEST.post_type }}">
{% endif %}
{{ post_type_value }}
{% for field.post_type in form %}{{ field.as_hidden }}
<input type="hidden" name="{{ post_type_field }}" value="{{ post_type_value }}" />
{% endfor %}

那是jquery无效的错误

[08/Apr/2013 08:08:02] "GET /portal/next/js/jquery-min.js HTTP/1.1" 404 4051 
[08/Apr/2013 08:08:02] "GET /portal/next/js/jquery-ui-min.js HTTP/1.1" 404 4060 

我尽量为jquery提供不同的路径,但它不起作用。

1 个答案:

答案 0 :(得分:0)

在你的模板中,你提到了类.'dateinput'而不是'.datepicker',正如你在widget中提到的那样。 试试这样......

$('.datepicker').datepicker({ format: "yyyy/mm/dd" });