Django DateInput()小部件出现在Chrome中，但不出现在Firefox或IE中 [英] Django DateInput() Widget appears in Chrome, but not Firefox or IE

问题描述

问题

我有一个DateInput()小部件，该小部件在Chrome中看起来不错，但在Firefox或IE中却没有.我正在使用Django 1.6.5和最新的Chrome(版本35.0.1916.153)和FireFox(30.0)

I have a DateInput() widget that appears fine in Chrome, but does not appear in Firefox or IE. I'm using Django 1.6.5 and the latest Chrome (Version 35.0.1916.153) and FireFox(30.0)

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

Works Correctly in Chrome (Calendar Selector appears)

在Firefox或IE中无法正常工作(日历选择器未出现)

Does not work correctly in Firefox or IE (Calendar Selector doesn't appear)

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)

这是我自民意测验教程以来的第一个应用程序，所以让我知道是否还有更多相关的代码应该在此处发布.谢谢您的宝贵时间.

This is my first app since the Polls tutorial so let me know if there's more relevant code that I should post here. Thanks for your time.

在回答和评论后进行编辑

我想包括我对出色的评论和回答所做的工作.我通过使用 http://jqueryui.com/datepicker/中的代码来使用jQuery UI解决方案将其实施到我的项目中，我补充说:

I wanted to include what I did in response to the great comments and answers. I went with the jQuery UI solution by using the code from http://jqueryui.com/datepicker/ To implement it into my project, I added:

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()

推荐答案

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

Django's default date widget is rendered as <input type="date"> in HTML. Chrome is the only major browser that has built in calendar for date input types. FF and IE read it as default text input.

解决方案是在Django中创建自定义窗口小部件，该窗口小部件使用一些JavaScript生成日期选择器.这应该为您指明正确的方向 https://docs.djangoproject.com/en/1.6/ref/forms/widgets/#customizing-widget-instances .您还可以使用某些库，例如jQueryUI( http://jqueryui.com/datepicker/)，这样就不必不必自己编写所有代码.

The solution would be to create custom widget in django, that uses some javascript to generate the datepicker. This should point you to the right direction https://docs.djangoproject.com/en/1.6/ref/forms/widgets/#customizing-widget-instances. You could also use some library like jQueryUI(http://jqueryui.com/datepicker/) so you don't have to code it all by yourself.

这篇关于Django DateInput()小部件出现在Chrome中，但不出现在Firefox或IE中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！