Django DateInput()小部件出现在Chrome中,但不出现在Firefox或IE中

时间:2014-06-16 13:53:18

标签: django django-templates

问题

我有一个在Chrome中显示正常的DateInput()小部件,但不会出现在Firefox或IE中。我正在使用Django 1.6.5和最新的Chrome(版本35.0.1916.153)和FireFox(30.0)

在Chrome中正常工作(出现日历选择器)     Chrome Calendar

在Firefox或IE中无法正常工作(不显示日历选择器) Firefox Calendar

forms.py

class DateInput(forms.DateInput):
    input_type = 'date'

class TimeForm(forms.ModelForm):
    class Meta:
        model = Time
        fields = ['date_select']
        widgets = {
            'date_select': DateInput()
        }

HTML

<form method='POST' action=''>{% csrf_token %}
    {{ time_form.as_p }}
    {{ program_form.as_p }}  {# can ignore this part #}
    <input type='submit' class="btn btn-lg btn-danger">

</form>

models.py

class Time(models.Model):
    date_select = models.DateField()

def __unicode__(self):
    return smart_unicode(self.date_select)

这是我自投票教程以来的第一个应用程序,所以请告诉我是否有更多相关代码,我应该在这里发布。谢谢你的时间。

在回答和评论后编辑

我想包括我为回应伟大的评论和答案所做的工作。我使用了http://jqueryui.com/datepicker/中的代码来使用jQuery UI解决方案。为了将其实现到我的项目中,我补充道:

HTML

<!-- Custom CS for JQuery UI -->
<link rel="stylesheet" href="/static/css/jquery-ui-1.10.4.min.css">

<!-- JQuery UI for things like Calendar Widget -->
<script src="/static/js/jquery-ui-1.10.4.min.js"></script>

<!-- Custom JS -->
<script src="/static/js/custom.js"></script>

custom.js

// For JQuery UI Calendar
$(function() {
    $( "#id_date_select" ).datepicker();
});

forms.py

class TimeForm(forms.ModelForm):
    class Meta:
         model = Time
         fields = ['date_select']
         date_select = forms.DateField()

1 个答案:

答案 0 :(得分:2)

Django的默认日期窗口小部件在HTML中呈现为<input type="date">。 Chrome是唯一为日期输入类型构建日历的主要浏览器。 FF和IE将其读作默认文本输入。

解决方案是在django中创建自定义小部件,它使用一些javascript来生成日期选择器。这应该指向正确的方向https://docs.djangoproject.com/en/1.6/ref/forms/widgets/#customizing-widget-instances。您也可以使用一些像jQueryUI(http://jqueryui.com/datepicker/)这样的库,这样您就不必自己编写代码了。