CODEWITHSUNDEEP
djangodjango-modelsdjango-formsdjango-views
Paul Rene
Paul Rene

Reputation: 710

Django DateInput() widget not working in ModelForm

I'm making a user login form with a CustomUser model derived from AbstractUser, with one extra field: date_of_birth. I use CreateView to generate the form. All fields show up, the password field uses the password widget as expected (showing dots instead of characters), but the date field does not (plain character field with no formatting or calendar). What am I overlooking?

models.py:

from django.urls import reverse
from django.contrib.auth.models import AbstractUser

# Create your models here.
class CustomUser(AbstractUser):
    date_of_birth = models.DateField(verbose_name="Date of Birth", blank=True, null=True)

    def get_absolute_url(self):
        return reverse('index')
    def __str__(self):
        return self.username

forms.py:

from .models import CustomUser


class CustomUserForm(forms.ModelForm):
    class Meta:
        model = CustomUser
        fields = ["username", "password", "first_name", "last_name", "email", "date_of_birth"]
        widgets = {
            "password": forms.PasswordInput(),
            "date_of_birth": forms.DateInput()
        }

views.py:

from django.views.generic.edit import CreateView
from .models import CustomUser
from .forms import CustomUserForm

# Create your views here.
def index(request):
    return HttpResponse("Hello, world")


class CustomUserCreate(CreateView):
    model = CustomUser
    form_class = CustomUserForm

Upvotes: 2

Views: 4133

Answers (3)

ArthurEzenwanne
ArthurEzenwanne

Reputation: 321

If you come here in 2020 and beyond, just overide the default type=text undelying input by using 'type':'date'

So something like the below would work. Tested on Mozilla Dev Edition 73.+

'date_of_birth': forms.DateInput(attrs={'class':'form-control', 'type':'date'}),

Upvotes: 10

Paul Rene
Paul Rene

Reputation: 710

Thanks voodoo-burger for pointing me in the right direction. I found a video with a very simple solution to use the HTML5 datepicker: https://www.youtube.com/watch?v=I2-JYxnSiB0.

It only requires to add the following to forms.py:

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

and then use this as the widget (so replace forms.DateInput() with DateInput()).

Upvotes: 1

voodoo-burger
voodoo-burger

Reputation: 2153

Django has no built-in fancy datepicker. DateField uses the DateInput widget which is just a text input.

Upvotes: 3

Related Questions