# datepicker for forms.DateInput missing?

**URL:** https://forum.djangoproject.com/t/datepicker-for-forms-dateinput-missing/44023
**Category:** Templates & Frontend
**Created:** [January 26, 2026, 8:40pm UTC](https://forum.djangoproject.com/t/datepicker-for-forms-dateinput-missing/44023 "2026-01-26T20:40:02Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![raspbuino](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/raspbuino/32/31320_2.png) [@raspbuino](https://forum.djangoproject.com/u/raspbuino)
#### Post date: [January 26, 2026, 8:40pm UTC](https://forum.djangoproject.com/t/datepicker-for-forms-dateinput-missing/44023/1 "2026-01-26T20:40:02Z")

</div>

Hello again,  
my first real django project is getting bigger and better every day and it is really fun.  
Meanwhile I got my first customized form (using manually created CSS) running. Creating a new data set and editing an existing one works like a charm. Perfect so far.  
But for the datefields I am missing the datepicker.  
It turns out the widget `form.DateInput` renders to `type="text"` (yes, it is specified like this in the documentation) but to get the datepicker running in the browser, there should rather be `type="date"`. I tried something but it is not clear to me how to do it in the best way.

My model looks like this:

```auto
class Quote(models.Model):
   ...
    dateinitiated = models.DateField(verbose_name="Quote initiated - Date", null=True, blank=True)
   ...

```

In forms.py I have this:

```auto
class QuoteForm(forms.ModelForm):
    class Meta:
        model = Quote
        fields = " __all__"

    widgets = {
        ...
        "dateinitiated": forms.DateInput(format="%Y-%m-%d",
                                         attrs={"type": "date"}),
        ...
    }

```

With this, no datepicker appears in the browser.  
The html-page shows this:

```auto
<tr>
    <th class="xform"><label for="id_dateinitiated">Quote initiated - Date:</label></th>
    <td class="xform"><input type="text" name="dateinitiated" id="id_dateinitiated"></td>
</tr> 

```

Using this rendered text to change the template testwise partly and manually for this field like so (look: there is the type=“date” thing !):

```auto
<tr>
    <th class="xform">MyDate</th>
    <td class="xform"><input type="date" name="dateinitiated" id="id_dateinitiated"></td>
</tr> 

```

…makes the datepicker showing up in the browser!

 ![image](https://us1.discourse-cdn.com/flex026/uploads/djangoproject/original/3X/4/b/4ba4baa72cd87e580c2f8a8281080bbff22bff6b.png)  
Perfect (almost - I still strugggle with the format, but that’s ok for now).  
What’s the trick to get the datepicker alive (hopefully without the need of changing my form definition entirely)?  
Thank you for reading and thinking about a solution!  
Mirko

---

<div class="post-metadata">

### Author: ![raspbuino](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/raspbuino/32/31320_2.png) [@raspbuino](https://forum.djangoproject.com/u/raspbuino)
#### Post date: [January 26, 2026, 8:51pm UTC](https://forum.djangoproject.com/t/datepicker-for-forms-dateinput-missing/44023/2 "2026-01-26T20:51:46Z")

</div>

Oops, I forgot the template(s):…  
This is how it works more less well but not showing the datepicker for the date fields:

```auto
...
<form method="POST">
    {% csrf_token %}
    <table class="xform">
...
        <tr>
            <th class="xform">{{ form.dateinitiated.label_tag }}</th>
            <td class="xform">{{ form.dateinitiated }}</td>
        </tr>                       
...
    </table>
    {% if user.is_authenticated %}
        <input class="xformbtn" type="submit" value="Submit">
    {% endif %}
</form>
...

```

And this is how the datepicker appears:

```auto
<form method="POST">
    {% csrf_token %}
    <table class="xform">
...
      <tr>
          <th class="xform">MyDate</th>
          <td class="xform"><input type="date" name="dateinitiated" id="id_dateinitiated" format="%Y-%m-%d"></td>
      </tr>                      
...
    </table>
    {% if user.is_authenticated %}
        <input class="xformbtn" type="submit" value="Submit">
    {% endif %}
</form>

```

---

<div class="post-metadata">

### Author: ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)
#### Post date: [January 26, 2026, 9:28pm UTC](https://forum.djangoproject.com/t/datepicker-for-forms-dateinput-missing/44023/3 "2026-01-26T21:28:43Z")

</div>

> [@raspbuino](#):
>
> ```auto
> class QuoteForm(forms.ModelForm):
> class Meta:
> model = Quote
> fields = " __all__"
> 
> widgets = {
> ...
> "dateinitiated": forms.DateInput(format="%Y-%m-%d",
> attrs={"type": "date"}),
> ...
> }
> 
> ```

If this is an accurate copy of your code, you don’t have the `widgets` definition properly indented. It needs to be part of the `Meta` class definition.

---

<div class="post-metadata">

### Author: ![michael-yin](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/michael-yin/32/105_2.png) [@michael-yin](https://forum.djangoproject.com/u/michael-yin)
#### Post date: [January 27, 2026, 3:22am UTC](https://forum.djangoproject.com/t/datepicker-for-forms-dateinput-missing/44023/4 "2026-01-27T03:22:02Z")

</div>

I remember Django’s built-in widget is using HTML’s native input.

**It indeed work** but also have some drawbacks, for example, different styles in different browser, some minor issue on mobile devices.

So you can keep using Django’s widget, or you can take a look at some solution such as [https://flatpickr.js.org/](https://flatpickr.js.org/)

You can build a custom widget using it and then use it in Django form like this

`date_field = forms.DateField(initial=timezone.now, widget=CustomDateWidget)`

If you want to see a real demo, here is the link: [https://app.saashammer.com/lookbook/inspect/datetime\_component/pick\_datetime/](https://app.saashammer.com/lookbook/inspect/datetime_component/pick_datetime/)

---

<div class="post-metadata">

### Author: ![raspbuino](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/raspbuino/32/31320_2.png) [@raspbuino](https://forum.djangoproject.com/u/raspbuino)
#### Post date: [January 27, 2026, 8:49am UTC](https://forum.djangoproject.com/t/datepicker-for-forms-dateinput-missing/44023/5 "2026-01-27T08:49:59Z")

</div>

Thank you very much for the quick answers!  
Ken, yes - the wrong indentation was the issue, this is fixed now. I think I would not have figured that out without your hint. Now I also have to fix a few other layout things but that is sth that I understand, why it happened. I am pretty sure your hint saved me many, many hours of desperate search. Appreciate once more your help!  
Michael, thank you for the hints as well, I will have a look at it soon. On the other hand I am deliberately trying to use what django provides itself in first place in order to keep it “simple”.  
Regards,  
Mirko
