# Add default DateTime form widget in a custom DateTime form

**URL:** https://forum.djangoproject.com/t/add-default-datetime-form-widget-in-a-custom-datetime-form/6414
**Category:** Templates & Frontend
**Created:** [February 2, 2021, 4:54pm UTC](https://forum.djangoproject.com/t/add-default-datetime-form-widget-in-a-custom-datetime-form/6414 "2021-02-02T16:54:08Z")
**Posts on this page:** 13
**Page:** 1

<div class="post-metadata">

### Author: ![ngle](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/ngle/32/1326_2.png) [@ngle](https://forum.djangoproject.com/u/ngle)
#### Post date: [February 2, 2021, 4:54pm UTC](https://forum.djangoproject.com/t/add-default-datetime-form-widget-in-a-custom-datetime-form/6414/1 "2021-02-02T16:54:08Z")

</div>

Hi all.

I’m sorry to disturb you, but I got a question about forms / widgets, and I can’t find answer…  
I’ll try to be the more specific possible.

In a model.py, I got this:  
`date_sortie = models.DateField('Release date', null=True)`

In ModelAdmin, if this field is print by default, I’ll got a field (OK) and a widget (a calendar icon, if I click on it, it fill the field with selected date).

However, if I add this field in forms.py, I lost this widget !  
`date_sortie = forms.DateField(label='Release year', required=False)`

I tried several things and stuff (from Internet), without succes.  
`date_sortie = forms.DateField(label='Release year', required=False, widget=SelectDateWidget)`

If I try what documentation says ([Widgets | Django documentation | Django](https://docs.djangoproject.com/en/3.1/ref/forms/widgets/)), with the below code, I get a `NameError: name 'SelectDateWidget' is not defined`

Any ideas to have this _default_ widget (just a date selector, I don’t want to twick it).

Thanks a lot…

Regards,

---

<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: [February 2, 2021, 5:04pm UTC](https://forum.djangoproject.com/t/add-default-datetime-form-widget-in-a-custom-datetime-form/6414/2 "2021-02-02T17:04:05Z")

</div>

You’re probably missing the proper import statement for that widget.

Under [Specifying Widgets](https://docs.djangoproject.com/en/3.1/ref/forms/widgets/#specifying-widgets), take particular note of what is being imported _and_ the format of the `widget` parameter for the field.

---

<div class="post-metadata">

### Author: ![ngle](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/ngle/32/1326_2.png) [@ngle](https://forum.djangoproject.com/u/ngle)
#### Post date: [February 2, 2021, 6:37pm UTC](https://forum.djangoproject.com/t/add-default-datetime-form-widget-in-a-custom-datetime-form/6414/3 "2021-02-02T18:37:12Z")

</div>

I tried with:

`date_sortie = forms.DateField(label='Release year', required=False, widget=forms.SelectDateWidget)`

I got a widget (I got three selects), but not the default widget.  
Please, help me. No mention on the documentation of how to enable it. I can’t understand why, and I guess it’s a stupid thing.

On [documentation](https://docs.djangoproject.com/en/3.1/ref/forms/widgets/#django.forms.SelectDateWidget), it says “The default is a list containing the current year and the next 9 years.”… I just want the default behaviour (when there is no forms.py): a link to a calendar to fill the field.

Thanks…

---

<div class="post-metadata">

### Author: ![ngle](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/ngle/32/1326_2.png) [@ngle](https://forum.djangoproject.com/u/ngle)
#### Post date: [February 2, 2021, 6:39pm UTC](https://forum.djangoproject.com/t/add-default-datetime-form-widget-in-a-custom-datetime-form/6414/4 "2021-02-02T18:39:22Z")

</div>

![Screenshot 2021-02-02 at 19.37.53](https://us1.discourse-cdn.com/flex026/uploads/djangoproject/original/2X/3/37d2328fe5526edb5301b191dd78f4c331ea892f.png)

This is the widget I want.  
If I have a DateField in models.py, OK.  
If I have a DateField in models.py and forms.py, KO.

I want to enable this widget. No mention of it on documentation. Thanks

---

<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: [February 2, 2021, 7:07pm UTC](https://forum.djangoproject.com/t/add-default-datetime-form-widget-in-a-custom-datetime-form/6414/5 "2021-02-02T19:07:52Z")

</div>

Ok, so one item to clear up - the widget used in the Admin facility is _not_ the default widget for a date field. They are two different things.

In this case, what you’re looking for is the [AdminDateWidget](https://github.com/django/django/blob/f9cfd346f0222d86bfbac26ef5455806965bae6b/django/contrib/admin/widgets.py#L49).

Note: I believe that using the Admin widgets outside the context of the Admin fits into the category of “undocumented and unsupported” behavior. I do not believe that any undocumented API provided by the Admin components are guaranteed to exist and work in the same way from release to release. If you want to use this widget in your code, I would suggest that you use the current existing implementation as a pattern for you to copy instead of directly using that instance.

---

<div class="post-metadata">

### Author: ![ngle](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/ngle/32/1326_2.png) [@ngle](https://forum.djangoproject.com/u/ngle)
#### Post date: [February 3, 2021, 8:57am UTC](https://forum.djangoproject.com/t/add-default-datetime-form-widget-in-a-custom-datetime-form/6414/6 "2021-02-03T08:57:34Z")

</div>

It’s a form, associated with a ModelAdmin, so, I’m in the admin context. Is that OK and safe? (I’m not sure to really understand your warnings)

Here’s the code to implement this widget:

```
from django import forms
from .models import *
from django.contrib.admin.widgets import AdminDateWidget

class FilmForm(forms.ModelForm):
    date_sortie = forms.DateField(label='Release year', required=False, widget=AdminDateWidget)

    class Meta:
        model = Film
        exclude = ()
```

---

<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: [February 3, 2021, 1:30pm UTC](https://forum.djangoproject.com/t/add-default-datetime-form-widget-in-a-custom-datetime-form/6414/7 "2021-02-03T13:30:39Z")

</div>

> [@ngle](#):
>
> It’s a form, associated with a ModelAdmin, so, I’m in the admin context. Is that OK and safe? (I’m not sure to really understand your warnings)

The essence of the warning is that I believe it’s _possible_ for the Django team to change the look & feel, the name, or even the existence of that widget without going through the normal deprecation process. You could install an update and have your form break and never have had a warning about it.

Note: I’m _not_ saying this _will_ happen or even is _likely_ to happen. (I don’t have any direct insight into that process.) I’m _only_ saying that since this is an undocumented feature, my understanding of it is that there’s no assurance that it won’t change suddenly.

---

<div class="post-metadata">

### Author: ![Lokicor](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/lokicor/32/3606_2.png) [@Lokicor](https://forum.djangoproject.com/u/Lokicor)
#### Post date: [February 22, 2021, 6:43pm UTC](https://forum.djangoproject.com/t/add-default-datetime-form-widget-in-a-custom-datetime-form/6414/8 "2021-02-22T18:43:42Z")

</div>

Hi all! I am also interested in the implementation of a widget for a DateField. I am trying to use the AdminDateWidget from the admin site, and I found the Form Assets in the documentation:

> **[Django](https://docs.djangoproject.com/en/3.1/topics/forms/media/)**
>
> The web framework for perfectionists with deadlines.

It says the following in one paragraph:

> If you like the widgets that the Django Admin application uses, feel free to use them in your own application! They’re all stored in `django.contrib.admin.widgets` .

However, I am not able to take advantage of this in one of my ModelForm 's. The form I am implementing is not showing up the widget.  
Have you tried?  
Thanks

---

<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: [February 22, 2021, 8:20pm UTC](https://forum.djangoproject.com/t/add-default-datetime-form-widget-in-a-custom-datetime-form/6414/9 "2021-02-22T20:20:05Z")

</div>

We’d need to see what you’re trying to be able to help you here. Please post your Form, view, and the template rendering the form.

---

<div class="post-metadata">

### Author: ![thanhtheman](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/thanhtheman/32/11262_2.png) [@thanhtheman](https://forum.djangoproject.com/u/thanhtheman)
#### Post date: [December 26, 2022, 3:58am UTC](https://forum.djangoproject.com/t/add-default-datetime-form-widget-in-a-custom-datetime-form/6414/10 "2022-12-26T03:58:42Z")

</div>

Hi @ngle and @Lokicor ,

I gave it a try and it worked. Basically, there are 3 parts to make it work.

Part 1 - Model & form  
The key is to set up 2 attributes date and time as shown below

```auto
from django.db import models
class Quote(models.Model):
    id = models.UUIDField(default=uuid.uuid4, unique=True, primary_key=True, editable=False)
    owner = models.ForeignKey(Profile, null=True, blank=True, on_delete=models.SET_NULL)
    content = models.TextField(max_length=1000, null=True, blank=False)
    author = models.CharField(max_length=200, blank=True, null=True)
    description = models.TextField(max_length=1000, blank=True, null=True)
    date = models.DateField(blank=True, null=True)
    time = models.TimeField(blank=True, null=True)
    created = models.DateTimeField(auto_now_add=True)

```

forms

```auto
from django.contrib.admin.widgets import AdminDateWidget, AdminTimeWidget, AdminSplitDateTime

class QuoteForm(ModelForm):
    class Meta:
        model = Quote
        fields = ['content', 'author', 'description', 'date', 'time']
        widgets = {
            'date': AdminDateWidget(),
            'time': AdminTimeWidget(),
        }

```

Part 2 - in your template HTML - please include these 3 lines in the head section to load  
required JS and CSS for the form’s date and time fields.

```auto
<script src="{% url 'js-catlog' %}"></script>
<script src="{% static '/admin/js/core.js' %}"></script>
<link rel="stylesheet" href="{% static 'admin/css/base.css' %}">
<link rel="stylesheet" href="{% static 'admin/css/widgets.css' %}">

<form method="POST" enctype="multipart/form-data">
    {% csrf_token%}
    {{ form.media }}
    {{ form.as_p }}
    <input type="submit" value="submit"/>
</form>

```

Part 3 - adding this path, along with other paths, to the project’s urls

```auto
from django.views.i18n import JavaScriptCatalog

urlpatterns = [
    path('jsi18n', JavaScriptCatalog.as_view(), name='js-catlog'),
]

```

Then it should render the date and time picker exactly the styling of the admin panel.

@KenWhitesell Thanks for redminding us that this solution is not “supported and documented” officially on Django’s docs and the risk of future update that might break our app.

---

<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: [December 26, 2022, 4:46am UTC](https://forum.djangoproject.com/t/add-default-datetime-form-widget-in-a-custom-datetime-form/6414/11 "2022-12-26T04:46:24Z")

</div>

There’s no need to split your model field for this purpose. Django provides the [SplitDateTimeField](https://docs.djangoproject.com/en/4.1/ref/forms/fields/#splitdatetimefield) form field as a mechanism for separating a DateTimeField in a model into two separate widgets. (These are specialized subclasses of the [MultiValueField](https://docs.djangoproject.com/en/4.1/ref/forms/fields/#multivaluefield) and the [MultiWidget](https://docs.djangoproject.com/en/4.1/ref/forms/widgets/#multiwidget), which provide a more generalized interface allowing for more than 2 form fields to be used with a single model field.)

---

<div class="post-metadata">

### Author: ![binooetomo](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/binooetomo/32/11883_2.png) [@binooetomo](https://forum.djangoproject.com/u/binooetomo)
#### Post date: [January 23, 2023, 2:39am UTC](https://forum.djangoproject.com/t/add-default-datetime-form-widget-in-a-custom-datetime-form/6414/12 "2023-01-23T02:39:31Z")

</div>

I really helped by your solution.

Just in case anybody found this post later, need to add → {% load static %}  
at the very top of template.

Here is what works for me.

```auto
{% load static %}
<script src="{% url 'js-catlog' %}"></script>
<script src="{% static '/admin/js/core.js' %}"></script>
<link rel="stylesheet" href="{% static 'admin/css/base.css' %}">
<link rel="stylesheet" href="{% static 'admin/css/widgets.css' %}">

{{ form.media }}
{{ form.as_p }}

```

Anyway.  
I also try to write a dynamic form.  
The dynamic loaded part is need a DateField.  
I use this solution, but the ‘calendar tool’ and the ‘today’ is not loaded.  
I made a post about this problem in SO [javascript - django calender tools missing (not shown) when loaded via ajax call - Stack Overflow](https://stackoverflow.com/q/75206431/5901318)

---

<div class="post-metadata">

### Author: ![Spidiffpaffpuff](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/spidiffpaffpuff/32/1557_2.png) [@Spidiffpaffpuff](https://forum.djangoproject.com/u/Spidiffpaffpuff)
#### Post date: [November 6, 2023, 10:19am UTC](https://forum.djangoproject.com/t/add-default-datetime-form-widget-in-a-custom-datetime-form/6414/13 "2023-11-06T10:19:08Z")

</div>

I have always wondered why the additional form fuctionality that the admin provides is not available to the general forms. Not very DRY! 🧐
