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>

Answer 1

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.

Answer 2

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.