Django DateInput() Widget appears in Chrome, but not Firefox or IE

问题

Issue

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)

Works Correctly in Chrome (Calendar Selector appears) Chrome Calendar

Does not work correctly in Firefox or IE (Calendar Selector doesn't appear) 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)

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.

EDIT AFTER ANSWERS AND COMMENTS

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

回答1:

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.

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.

来源：https://stackoverflow.com/questions/24245394/django-dateinput-widget-appears-in-chrome-but-not-firefox-or-ie

标签

django

django-templates