DateTime field in Django form model

Question

When using DateTimeField in ModelForms, they look like text fields. How can I make them look like in the admin? (When I go to the admin and add a show I see the fields as date fields)

# models.py
class Show(models.Model):
    ...
    start_time = models.DateTimeField("Event Time")
    sale_end_time = models.DateTimeField("Sale End Time")

class ShowForm(ModelForm):

    class Meta:
        model = Show 

# views.py
def createshow(request):
    if request.method == 'POST':
        form = ShowForm(request.POST)
        if form.is_valid():
            form.save()
            return HttpResponseRedirect('/showsaved')
    else:
        form = ShowForm()
        return render(request, 'BizCreateShow.html', {'ShowForm' : form})

In the template:

<form class="form-horizontal well" action="" method="post">
 {% csrf_token %}
    {{ ShowForm }} </br>
    <input type="submit" value="Submit">
</form>

score 9 · Answer 1 · edited May 27 '18 at 14:32

You can do this with django widgets. It is very simple and easy to implement. Bellow are the details how you can use this using widgets.

in forms.py

from django.contrib.admin import widgets

class ShowForm(ModelForm):
    class Meta:
        model = Show 
    def __init__(self, *args, **kwargs):
        super(ShowForm, self).__init__(*args, **kwargs)
        self.fields['start_time'].widget = widgets.AdminSplitDateTime()
        self.fields['sale_end_time'].widget = widgets.AdminSplitDateTime()

in template

<script type="text/javascript" src="/my_admin/jsi18n/"></script>
<script type="text/javascript" src="/media/admin/js/core.js"></script>

<link rel="stylesheet" type="text/css" href="/media/admin/css/forms.css"/>
<link rel="stylesheet" type="text/css" href="/media/admin/css/base.css"/>
<link rel="stylesheet" type="text/css" href="/media/admin/css/global.css"/>
<link rel="stylesheet" type="text/css" href="/media/admin/css/widgets.css"/>

This is it. Please let me know if i am not much clear. Or you are facing any error in it.

Thanks, when I try that I get an error: "Undefined variable: widgets" on this line: self.fields['start_time'].widget = widgets.AdminSplitDateTime() — misschoksondik, Mar 29 '13 at 10:51
try this "from django.contrib.admin import widgets" may it will solve your problem. — fakhir hanif, Apr 01 '13 at 14:25
Note that in 1.4+ you call the static files differently: http://stackoverflow.com/a/15292176/1863061 — Laci, Jun 28 '16 at 11:30

score 3 · Answer 2 · answered Mar 26 '13 at 19:17

3

You should probably use something like jQuery UI's datepicker widget:

The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.

answered Mar 26 '13 at 19:17

Udi

29,222
9
96
129

Thanks! but how can I give the input field a class or ID to use in the javascript if the form generates in the model? – misschoksondik Mar 29 '13 at 11:17
Also- I need the time in the same field, don't I? It only lets me select the date. – misschoksondik Mar 29 '13 at 19:30
Ok, I used $("form input[name='start_time']").click(function () { $("form input[name='start_time']").datepicker(); }); – misschoksondik Mar 31 '13 at 08:17
It needs to be said that this method will NOT work in formsets. – addohm Dec 28 '17 at 03:50

DateTime field in Django form model

2 Answers2