Django form.as_p DateField not showing input type as date

Question

Working on my first django app, and I have a model defined with some DateFields, and then a ModelForm off of that model i.e.

models.py

class MyModel(models.Model):
    ...
    my_date = models.DateField('my date')
    ...

class MyModelForm(ModelForm):
    class Meta:
        model = MyModel
        fields = '__all__'

views.py

def show(request):
    form = MyModelForm
    template_name = 'myapp/show.html'
    return render(request,template_name,{'form':form})

and then in my html I use the .as_p to have django render the form for me

<form action="/show/" method="post">{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="Submit" />
</form>

But the DateFields have input type text, not date. Is there a way to change this?

Asked By: C.B.

||

Source

Answer 1

You can create a custom widget:

from django import forms

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

class MyModelForm(forms.ModelForm):
    class Meta:
        model = MyModel
        fields = '__all__'
        widgets = {
            'my_date': DateInput()
        }

Answered By: laidibug

Answer 2

Using the django-widget-tweaks package you can do this pretty simply by using:

{% load widget_tweaks %}
{{form.date|attr:"type:date"}}

and making the field a date time field in your class:

date = forms.DateField()

Answered By: MyCah

Answer 3

There’s no need to subclass DateInput.

class MyModelForm(forms.ModelForm):
    class Meta:
        model = MyModel
        fields = '__all__'
        widgets = {
            'my_date': forms.DateInput(attrs={'type': 'date'})
        }

Answered By: jhrr

Answer 4

Installation

Run pip install django-datetimepicker
Add 'datetimepicker' to your INSTALLED_APPS

Basic usage

Here is an example of how to use the widget.

. Assign the DateTimePicker to a DateTimeField, DateField or TimeField.

from django import forms
from datetimepicker.widgets import DateTimePicker


class SampleForm(forms.Form):
     datetime = forms.DateTimeField(widget=DateTimePicker(),)

Answered By: Nikhil Bhardwaj

Answer 5

To use directly in forms.Form

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

class Gym(forms.Form):
    starting_date = forms.DateField(widget = DateInput)

Answered By: nofoobar

Answer 6

start_date = forms.DateField(widget=forms.DateInput(attrs={'type': 'date'}))

Answered By: Atma

Answer 7

forms.py

from django import forms
from .models import MyModel
from django.forms.widgets import DateInput # need to import

class MyForm(forms.ModelForm):
    class Meta:
        model = MyModel
        fields = '__all__'
        widgets = {
            'my_date': DateInput(attrs={'type': 'date'})
        }

Answered By: HimEl

Answer 8

You can specify type attribute in attrs dictionary which you want.

class AddProduct(forms.Form):
        name        = forms.CharField(widget=forms.TextInput(attrs={'class' : 'form-control'}), required=True)
        amount      = forms.DecimalField(widget=forms.NumberInput(attrs={'class' : 'form-control'}), required=True)
        product_mfg = forms.CharField(widget=forms.DateInput(attrs={'class' : 'form-control', 'type':'date'}), required=True)
        product_exp = forms.DateField(widget=forms.DateInput(attrs={'class' : 'form-control', 'type':'date'}), required=True)
        department  = forms.CharField(widget=forms.Select(attrs={'class' : 'form-control'}), required=True)

Answered By: Mohit Mishra

Answer 9

If we don’t use ModelForm rather if we use django.views.generic.edit.CreateView only, there is a way for converting the default type of the input field (from text to date).

class MyModelCreateView(CreateView):
    model = MyModel
    ...

    def get_form(self):
        form = super().get_form()
        form.fields['my_date'].widget = forms.DateInput(attrs={'type': 'date'})
        return form

This will render the input field like this,

<input type="date" name="my_date" required="" id="id_my_date">

Answered By: Abdullah Al Farooq

Django form.as_p DateField not showing input type as date

Question:

Answers:

Installation

Basic usage

You can specify type attribute in attrs dictionary which you want.