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

Posted

技术标签:

【中文标题】如何以酥脆的形式在日期字段上显示日期选择器日历?【英文标题】:how to show datepicker calender on datefield in crispy forms? 【发布时间】:2013-03-27 20:37:35 【问题描述】:

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

但是当我在我的模板文件中使用那个清晰的表单时,它只是没有日期选择器的常规字段

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

模型.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 is not working

[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】:

在您的模板中,您将类称为“.dateinput”,而不是您在小部件中提到的“.datepicker”。 试试这样...

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

【讨论】:

检查 jquery 是否在您的模板中工作并且表单可见。 @Raji 如何在 django 使用的网页中显示日期选择器 此脚本之前需要包含 jquery-ui(js 和 css)。

以上是关于如何以酥脆的形式在日期字段上显示日期选择器日历?的主要内容,如果未能解决你的问题,请参考以下文章

jquery 日历/日期选择器

剑道日期选择器随机不显示日历以更改日期

power BI OTD不同的日期如何设置report 时间

在输入字段 c# 中的 Unity 上显示从日历中选择的日期

如何在 Drupal 中以页面的形式更改“视图”的“日期字段”格式?

如何验证日期选择器以禁止/拒绝某些日期?