# Need help with Date Time Picker

**URL:** <https://forum.djangoproject.com/t/need-help-with-date-time-picker/16988>\
**Category:** Templates & Frontend\
**Created:** [November 12, 2022, 4:43pm UTC](https://forum.djangoproject.com/t/need-help-with-date-time-picker/16988 "2022-11-12T16:43:43Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![UgniusSau](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/ugniussau/32/10830_2.png) [@UgniusSau](https://forum.djangoproject.com/u/UgniusSau)\
**Post date:** [November 12, 2022, 4:43pm UTC](https://forum.djangoproject.com/t/need-help-with-date-time-picker/16988/1 "2022-11-12T16:43:43Z")

</div>

I have created custom form and widget input but it still displays as text input instead of the widget

```auto
widgets.py

from django import forms

class DateTimePickerInput(forms.DateTimeInput):
        input_type = 'datetime'

```

```auto
forms.py

from .widgets import DateTimePickerInput
from django.forms import ModelForm
from .models import Task

class ExampleForm(ModelForm):
    class Meta:
        model = Task
        fields = ['title', 'start_date', 'end_date', 'complete']

        widgets = {
            'start_date' : DateTimePickerInput(),
            'end_date' : DateTimePickerInput(),
        }

```

```auto
models.py

import uuid
from django.db import models
from django.contrib.auth.models import User

class Task(models.Model):
    id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
    
    user = models.ForeignKey(User, on_delete=models.CASCADE, null = True, blank = True)
    title = models.CharField(max_length = 200)
    description = models.TextField(null = True, blank = True)
    complete = models.BooleanField(default= False)
    created = models.DateTimeField(auto_now_add = True)
    start_date = models.DateTimeField(null=True)
    end_date = models.DateTimeField(null=True)

    def __str__ (self):
        return self.title

    class Meta:
        ordering = ['complete']

```

```auto
views.py 

from django.shortcuts import render, redirect
from django.views.generic.list import ListView
from django.views.generic.detail import DetailView
from django.views.generic.edit import CreateView, UpdateView, DeleteView, FormView
from django.urls import reverse_lazy

from django.contrib.auth.views import LoginView
from django.contrib.auth.mixins import LoginRequiredMixin
from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth import login

from .models import Task
from .forms import ExampleForm

def CreateTask(request):
    form = ExampleForm()
    context = {'form': form}
    return render(request, 'base/task_form.html', context)

```

```auto
urls.py

from django.urls import path
from . import views
from .views import TaskList, TaskDetail, TaskUpdate, DeleteView, CustomLoginView, RegisterPage , CreateTask #, TaskCreate 
from django.contrib.auth.views import LogoutView

urlpatterns =[
    path('login/', CustomLoginView.as_view(), name='login'),
    path('logout/', LogoutView.as_view(next_page= 'login'), name='logout'),
    path('register/', RegisterPage.as_view(), name='register'),

    path('', TaskList.as_view(), name='tasks'),
    path('task/<uuid:pk>/', TaskDetail.as_view(), name='task'),
    # path('task-create', TaskCreate.as_view(), name='task-create'),
    path('task-create', views.CreateTask, name='task-create'),
    path('task-update/<uuid:pk>/', TaskUpdate.as_view(), name='task-update'),
    path('task-delete/<uuid:pk>/', DeleteView.as_view(), name='task-delete'),
]

```

```auto
task_form.html

{% extends 'base/main_style.html' %}
{% block content %}
<h3>Task Form</h3>
<a href="{% url 'tasks' %}">Go back</a>

<form method="POST" action="">
    {% csrf_token %}
    <!-- {{form.as_p}} -->
    {{form}}

        <!-- <label for="title">Title:</label><br>
        {% if task.title != null %}
        <input type="text" id="title" name="title">{{task.title}}<br>
        {% else %}
        <input type="text" id="title" name="title"><br>
        {% endif %}
        <label for="start_date">start_date:</label><br>
        <input type="date" id="start_date" name="start_date">
  -->
    <!-- <input type="submit" value="Choose time now"> -->
    <input type="submit" value="Submit">
</form>
{% endblock content %}

```

---

<div class="post-metadata">

**Author:** ![biscotty666](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/biscotty666/32/10522_2.png) [@biscotty666](https://forum.djangoproject.com/u/biscotty666)\
**Post date:** [November 12, 2022, 5:00pm UTC](https://forum.djangoproject.com/t/need-help-with-date-time-picker/16988/2 "2022-11-12T17:00:47Z")

</div>

I struggled with this too 🙂 Along the way I solved it and if I remember it was subclassing ModelForm rather than Form that did the trick.

---

<div class="post-metadata">

**Author:** ![UgniusSau](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/ugniussau/32/10830_2.png) [@UgniusSau](https://forum.djangoproject.com/u/UgniusSau)\
**Post date:** [November 12, 2022, 5:16pm UTC](https://forum.djangoproject.com/t/need-help-with-date-time-picker/16988/3 "2022-11-12T17:16:23Z")

</div>

Could you share your project implementation with datetime picker?

---

<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:** [November 12, 2022, 5:16pm UTC](https://forum.djangoproject.com/t/need-help-with-date-time-picker/16988/4 "2022-11-12T17:16:47Z")

</div>

If you’re looking for specific assistance with code, please post the code here and not links to code elsewhere. (Posting links to external sites means that the code can go away at just about any time, reducing the value of the answers provided here. Also, code posted externally can’t be indexed or searched on this site.)

When you post code here, enclose it between lines of three backtick - ` characters. This means you’ll have a line of ```, then your code, then another line of ```. This forces the forum software to keep your code properly formatted, which is critical with Python.

---

<div class="post-metadata">

**Author:** ![UgniusSau](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/ugniussau/32/10830_2.png) [@UgniusSau](https://forum.djangoproject.com/u/UgniusSau)\
**Post date:** [November 12, 2022, 5:23pm UTC](https://forum.djangoproject.com/t/need-help-with-date-time-picker/16988/5 "2022-11-12T17:23:27Z")

</div>

Thanks for pointing it out. Just fixed code to blocks.

---

<div class="post-metadata">

**Author:** ![biscotty666](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/biscotty666/32/10522_2.png) [@biscotty666](https://forum.djangoproject.com/u/biscotty666)\
**Post date:** [November 12, 2022, 5:26pm UTC](https://forum.djangoproject.com/t/need-help-with-date-time-picker/16988/6 "2022-11-12T17:26:28Z")

</div>

I used widgets.DateInput() instead of DateTimePickerInput().

---

<div class="post-metadata">

**Author:** ![UgniusSau](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/ugniussau/32/10830_2.png) [@UgniusSau](https://forum.djangoproject.com/u/UgniusSau)\
**Post date:** [November 12, 2022, 5:40pm UTC](https://forum.djangoproject.com/t/need-help-with-date-time-picker/16988/7 "2022-11-12T17:40:00Z")

</div>

It seems to be working instead of using forms.DateTimeInput() to split them to two seperate ones.

---

<div class="post-metadata">

**Author:** ![kimiakldz](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kimiakldz/32/19317_2.png) [@kimiakldz](https://forum.djangoproject.com/u/kimiakldz)\
**Post date:** [February 20, 2024, 10:53am UTC](https://forum.djangoproject.com/t/need-help-with-date-time-picker/16988/8 "2024-02-20T10:53:07Z")

</div>

class DateTimeInput(forms.DateTimeInput):  
input\_type = ‘datetime-local’

Try this  
it worked for me

 ![Screenshot from 2024-02-20 14-13-26](https://us1.discourse-cdn.com/flex026/uploads/djangoproject/original/3X/2/8/28c5df41cdb7e16357fa860edb1ac927ede0a9fb.png)

---

<div class="post-metadata">

**Author:** ![sam1-khan](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/sam1-khan/32/24835_2.png) [@sam1-khan](https://forum.djangoproject.com/u/sam1-khan)\
**Post date:** [October 27, 2024, 9:01pm UTC](https://forum.djangoproject.com/t/need-help-with-date-time-picker/16988/9 "2024-10-27T21:01:10Z")

</div>

Is this still working? I copied the code above and still cant see the date time picker, even tried a different browser