<p>How can I use the nifty JavaScript date and time widgets that the default admin uses with my custom view?</p>

<p>I have looked through <a href="https://docs.djangoproject.com/en/dev/topics/forms/" rel="noreferrer">the Django forms documentation</a>, and it briefly mentions django.contrib.admin.widgets, but I don't know how to use it?</p>

<p>Here is my template that I want it applied on.</p>

<pre><code>&lt;form action="." method="POST"&gt;
    &lt;table&gt;
        {% for f in form %}
           &lt;tr&gt; &lt;td&gt; {{ f.name }}&lt;/td&gt; &lt;td&gt;{{ f }}&lt;/td&gt; &lt;/tr&gt;
        {% endfor %}
    &lt;/table&gt;
    &lt;input type="submit" name="submit" value="Add Product"&gt;
&lt;/form&gt;
</code></pre>

<p>Also, I think it should be noted that I haven't really written a view up myself for this form, I am using a generic view. Here is the entry from the url.py:</p>

<pre><code>(r'^admin/products/add/$', create_object, {'model': Product, 'post_save_redirect': ''}),
</code></pre>

<p>And I am relevantly new to the whole Django/MVC/MTV thing, so please go easy...</p>

[{'answer_id': 38916, 'author': 'Carl Meyer', 'author_id': 3207, 'author_profile': 'https://Stackoverflow.com/users/3207', 'pm_score': 8, 'selected': True, 'text': '<p>The growing complexity of this answer over time, and the many hacks required, probably ought to caution you against doing this at all. It\'s relying on undocumented internal implementation details of the admin, is likely to break again in future versions of Django, and is no easier to implement than just finding another JS calendar widget and using that.</p>\n<p>That said, here\'s what you have to do if you\'re determined to make this work:</p>\n<ol>\n<li><p>Define your own <code>ModelForm</code> subclass for your model (best to put it in forms.py in your app), and tell it to use the <code>AdminDateWidget</code> / <code>AdminTimeWidget</code> / <code>AdminSplitDateTime</code> (replace \'mydate\' etc with the proper field names from your model):</p>\n<pre><code> from django import forms\n from my_app.models import Product\n from django.contrib.admin import widgets                                       \n\n class ProductForm(forms.ModelForm):\n     class Meta:\n         model = Product\n     def __init__(self, *args, **kwargs):\n         super(ProductForm, self).__init__(*args, **kwargs)\n         self.fields[\'mydate\'].widget = widgets.AdminDateWidget()\n         self.fields[\'mytime\'].widget = widgets.AdminTimeWidget()\n         self.fields[\'mydatetime\'].widget = widgets.AdminSplitDateTime()\n</code></pre>\n</li>\n<li><p>Change your URLconf to pass <code>\'form_class\': ProductForm</code> instead of <code>\'model\': Product</code> to the generic <code>create_object</code> view (that\'ll mean <code>from my_app.forms import ProductForm</code> instead of <code>from my_app.models import Product</code>, of course).</p>\n</li>\n<li><p>In the head of your template, include <code>{{ form.media }}</code> to output the links to the Javascript files.</p>\n</li>\n<li><p>And the hacky part: the admin date/time widgets presume that the i18n JS stuff has been loaded, and also require core.js, but don\'t provide either one automatically.  So in your template above <code>{{ form.media }}</code> you\'ll need:</p>\n<pre><code> &lt;script type=&quot;text/javascript&quot; src=&quot;/my_admin/jsi18n/&quot;&gt;&lt;/script&gt;\n &lt;script type=&quot;text/javascript&quot; src=&quot;/media/admin/js/core.js&quot;&gt;&lt;/script&gt;\n</code></pre>\n</li>\n</ol>\n<p>You may also wish to use the following admin CSS (thanks <a href="https://stackoverflow.com/questions/38601/using-django-time-date-widgets-in-custom-form/719583#719583">Alex</a> for mentioning this):</p>\n<pre><code>    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/media/admin/css/forms.css&quot;/&gt;\n    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/media/admin/css/base.css&quot;/&gt;\n    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/media/admin/css/global.css&quot;/&gt;\n    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/media/admin/css/widgets.css&quot;/&gt;\n</code></pre>\n<p>This implies that Django\'s admin media (<code>ADMIN_MEDIA_PREFIX</code>) is at /media/admin/ - you can change that for your setup.  Ideally you\'d use a context processor to pass this values to your template instead of hardcoding it, but that\'s beyond the scope of this question.</p>\n<p>This also requires that the URL /my_admin/jsi18n/ be manually wired up to the django.views.i18n.javascript_catalog view (or null_javascript_catalog if you aren\'t using I18N).  You have to do this yourself instead of going through the admin application so it\'s accessible regardless of whether you\'re logged into the admin (thanks <a href="https://stackoverflow.com/questions/38601/using-django-time-date-widgets-in-custom-form/408230#408230">Jeremy</a> for pointing this out).  Sample code for your URLconf:</p>\n<pre><code>(r\'^my_admin/jsi18n\', \'django.views.i18n.javascript_catalog\'),\n</code></pre>\n<p>Lastly, if you are using Django 1.2 or later, you need some additional code in your template to help the widgets find their media:</p>\n<pre><code>{% load adminmedia %} /* At the top of the template. */\n\n/* In the head section of the template. */\n&lt;script type=&quot;text/javascript&quot;&gt;\nwindow.__admin_media_prefix__ = &quot;{% filter escapejs %}{% admin_media_prefix %}{% endfilter %}&quot;;\n&lt;/script&gt;\n</code></pre>\n<p>Thanks <a href="https://stackoverflow.com/questions/38601/using-django-time-date-widgets-in-custom-form/2818128#2818128">lupefiasco</a> for this addition.</p>\n'}, {'answer_id': 72284, 'author': 'zgoda', 'author_id': 12138, 'author_profile': 'https://Stackoverflow.com/users/12138', 'pm_score': 6, 'selected': False, 'text': '<p>As the solution is hackish, I think using your own date/time widget with some JavaScript is more feasible.</p>\n'}, {'answer_id': 408230, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 4, 'selected': False, 'text': "<p>Yep, I ended up overriding the /admin/jsi18n/ url.</p>\n\n<p>Here's what I added in my urls.py.  Make sure it's above the /admin/ url</p>\n\n<pre><code>    (r'^admin/jsi18n', i18n_javascript),\n</code></pre>\n\n<p>And here is the i18n_javascript function I created.</p>\n\n<pre><code>from django.contrib import admin\ndef i18n_javascript(request):\n  return admin.site.i18n_javascript(request)\n</code></pre>\n"}, {'answer_id': 719583, 'author': 'Alex. S.', 'author_id': 18300, 'author_profile': 'https://Stackoverflow.com/users/18300', 'pm_score': 3, 'selected': False, 'text': '<p>Complementing the answer by Carl Meyer, I would like to comment that you need to put that header in some valid block (inside the header) within your template.</p>\n\n<pre><code>{% block extra_head %}\n\n&lt;link rel="stylesheet" type="text/css" href="/media/admin/css/forms.css"/&gt;\n&lt;link rel="stylesheet" type="text/css" href="/media/admin/css/base.css"/&gt;\n&lt;link rel="stylesheet" type="text/css" href="/media/admin/css/global.css"/&gt;\n&lt;link rel="stylesheet" type="text/css" href="/media/admin/css/widgets.css"/&gt;\n\n&lt;script type="text/javascript" src="/admin/jsi18n/"&gt;&lt;/script&gt;\n&lt;script type="text/javascript" src="/media/admin/js/core.js"&gt;&lt;/script&gt;\n&lt;script type="text/javascript" src="/media/admin/js/admin/RelatedObjectLookups.js"&gt;&lt;/script&gt;\n\n{{ form.media }}\n\n{% endblock %}\n</code></pre>\n'}, {'answer_id': 1392329, 'author': 'monkut', 'author_id': 24718, 'author_profile': 'https://Stackoverflow.com/users/24718', 'pm_score': 4, 'selected': False, 'text': '<p>I find myself referencing this post a lot, and found that the <a href="http://docs.djangoproject.com/en/dev/topics/forms/modelforms/#overriding-the-default-field-types" rel="noreferrer">documentation</a> defines a <em>slightly</em> less hacky way to override default widgets. </p>\n\n<p>(<em>No need to override the ModelForm\'s __init__ method</em>)</p>\n\n<p>However, you still need to wire your JS and CSS appropriately as Carl mentions.</p>\n\n<p><strong>forms.py</strong></p>\n\n<pre><code>from django import forms\nfrom my_app.models import Product\nfrom django.contrib.admin import widgets                                       \n\n\nclass ProductForm(forms.ModelForm):\n    mydate = forms.DateField(widget=widgets.AdminDateWidget)\n    mytime = forms.TimeField(widget=widgets.AdminTimeWidget)\n    mydatetime = forms.SplitDateTimeField(widget=widgets.AdminSplitDateTime)\n\n    class Meta:\n        model = Product\n</code></pre>\n\n<p>Reference <a href="http://docs.djangoproject.com/en/dev/topics/forms/modelforms/#field-types" rel="noreferrer">Field Types</a> to find the default form fields.</p>\n'}, {'answer_id': 1833247, 'author': 'Sam A.', 'author_id': 318368, 'author_profile': 'https://Stackoverflow.com/users/318368', 'pm_score': 1, 'selected': False, 'text': '<p>Updated solution and workaround for <strong>SplitDateTime</strong> with <strong>required=False</strong>:</p>\n\n<p><em>forms.py</em></p>\n\n<pre><code>from django import forms\n\nclass SplitDateTimeJSField(forms.SplitDateTimeField):\n    def __init__(self, *args, **kwargs):\n        super(SplitDateTimeJSField, self).__init__(*args, **kwargs)\n        self.widget.widgets[0].attrs = {\'class\': \'vDateField\'}\n        self.widget.widgets[1].attrs = {\'class\': \'vTimeField\'}  \n\n\nclass AnyFormOrModelForm(forms.Form):\n    date = forms.DateField(widget=forms.TextInput(attrs={\'class\':\'vDateField\'}))\n    time = forms.TimeField(widget=forms.TextInput(attrs={\'class\':\'vTimeField\'}))\n    timestamp = SplitDateTimeJSField(required=False,)\n</code></pre>\n\n<p><em>form.html</em></p>\n\n<pre><code>&lt;script type="text/javascript" src="/admin/jsi18n/"&gt;&lt;/script&gt;\n&lt;script type="text/javascript" src="/admin_media/js/core.js"&gt;&lt;/script&gt;\n&lt;script type="text/javascript" src="/admin_media/js/calendar.js"&gt;&lt;/script&gt;\n&lt;script type="text/javascript" src="/admin_media/js/admin/DateTimeShortcuts.js"&gt;&lt;/script&gt;\n</code></pre>\n\n<p><em>urls.py</em></p>\n\n<pre><code>(r\'^admin/jsi18n/\', \'django.views.i18n.javascript_catalog\'),\n</code></pre>\n'}, {'answer_id': 2396907, 'author': 'Dennis Kioko', 'author_id': 263501, 'author_profile': 'https://Stackoverflow.com/users/263501', 'pm_score': 3, 'selected': False, 'text': "<p>The below will also work as a last resort if the above failed</p>\n\n<pre><code>class PaymentsForm(forms.ModelForm):\n    class Meta:\n        model = Payments\n\n    def __init__(self, *args, **kwargs):\n        super(PaymentsForm, self).__init__(*args, **kwargs)\n        self.fields['date'].widget = SelectDateWidget()\n</code></pre>\n\n<p>Same as </p>\n\n<pre><code>class PaymentsForm(forms.ModelForm):\n    date = forms.DateField(widget=SelectDateWidget())\n\n    class Meta:\n        model = Payments\n</code></pre>\n\n<p>put this in your forms.py <code>from django.forms.extras.widgets import SelectDateWidget</code></p>\n"}, {'answer_id': 2818128, 'author': 'mshafrir', 'author_id': 5675, 'author_profile': 'https://Stackoverflow.com/users/5675', 'pm_score': 3, 'selected': False, 'text': '<p>Starting in Django 1.2 RC1, if you\'re using the Django admin date picker widge trick, the following has to be added to your template, or you\'ll see the calendar icon url being referenced through "/missing-admin-media-prefix/".</p>\n\n<pre><code>{% load adminmedia %} /* At the top of the template. */\n\n/* In the head section of the template. */\n&lt;script type="text/javascript"&gt;\nwindow.__admin_media_prefix__ = "{% filter escapejs %}{% admin_media_prefix %}{% endfilter %}";\n&lt;/script&gt;\n</code></pre>\n'}, {'answer_id': 9139017, 'author': 'trubliphone', 'author_id': 1060339, 'author_profile': 'https://Stackoverflow.com/users/1060339', 'pm_score': 2, 'selected': False, 'text': '<p>What about just assigning a class to your widget and then binding that class to the JQuery datepicker?</p>\n\n<p>Django forms.py:</p>\n\n<pre><code>class MyForm(forms.ModelForm):\n\n  class Meta:\n    model = MyModel\n\n  def __init__(self, *args, **kwargs):\n    super(MyForm, self).__init__(*args, **kwargs)\n    self.fields[\'my_date_field\'].widget.attrs[\'class\'] = \'datepicker\'\n</code></pre>\n\n<p>And some JavaScript for the template:</p>\n\n<pre><code>  $(".datepicker").datepicker();\n</code></pre>\n'}, {'answer_id': 11446609, 'author': 'Romamo', 'author_id': 1508578, 'author_profile': 'https://Stackoverflow.com/users/1508578', 'pm_score': 4, 'selected': False, 'text': '<p>My head code for 1.4 version(some new and some removed)</p>\n\n<pre><code>{% block extrahead %}\n\n&lt;link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}admin/css/forms.css"/&gt;\n&lt;link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}admin/css/base.css"/&gt;\n&lt;link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}admin/css/global.css"/&gt;\n&lt;link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}admin/css/widgets.css"/&gt;\n\n&lt;script type="text/javascript" src="/admin/jsi18n/"&gt;&lt;/script&gt;\n&lt;script type="text/javascript" src="{{ STATIC_URL }}admin/js/core.js"&gt;&lt;/script&gt;\n&lt;script type="text/javascript" src="{{ STATIC_URL }}admin/js/admin/RelatedObjectLookups.js"&gt;&lt;/script&gt;\n&lt;script type="text/javascript" src="{{ STATIC_URL }}admin/js/jquery.js"&gt;&lt;/script&gt;\n&lt;script type="text/javascript" src="{{ STATIC_URL }}admin/js/jquery.init.js"&gt;&lt;/script&gt;\n&lt;script type="text/javascript" src="{{ STATIC_URL }}admin/js/actions.js"&gt;&lt;/script&gt;\n&lt;script type="text/javascript" src="{{ STATIC_URL }}admin/js/calendar.js"&gt;&lt;/script&gt;\n&lt;script type="text/javascript" src="{{ STATIC_URL }}admin/js/admin/DateTimeShortcuts.js"&gt;&lt;/script&gt;\n\n{% endblock %}\n</code></pre>\n'}, {'answer_id': 39946546, 'author': 'Jose Luis Quichimbo', 'author_id': 5833286, 'author_profile': 'https://Stackoverflow.com/users/5833286', 'pm_score': 0, 'selected': False, 'text': '<p>In Django 10.\nmyproject/urls.py:\nat the beginning of urlpatterns</p>\n\n<pre><code>  from django.views.i18n import JavaScriptCatalog\n\nurlpatterns = [\n    url(r\'^jsi18n/$\', JavaScriptCatalog.as_view(), name=\'javascript-catalog\'),\n.\n.\n.]\n</code></pre>\n\n<p>In my template.html:</p>\n\n<pre><code>{% load staticfiles %}\n\n    &lt;script src="{% static "js/jquery-2.2.3.min.js" %}"&gt;&lt;/script&gt;\n    &lt;script src="{% static "js/bootstrap.min.js" %}"&gt;&lt;/script&gt;\n    {# Loading internazionalization for js #}\n    {% load i18n admin_modify %}\n    &lt;script type="text/javascript" src="{% url \'javascript-catalog\' %}"&gt;&lt;/script&gt;\n    &lt;script type="text/javascript" src="{% static "/admin/js/jquery.init.js" %}"&gt;&lt;/script&gt;\n\n    &lt;link rel="stylesheet" type="text/css" href="{% static "/admin/css/base.css" %}"&gt;\n    &lt;link rel="stylesheet" type="text/css" href="{% static "/admin/css/forms.css" %}"&gt;\n    &lt;link rel="stylesheet" type="text/css" href="{% static "/admin/css/login.css" %}"&gt;\n    &lt;link rel="stylesheet" type="text/css" href="{% static "/admin/css/widgets.css" %}"&gt;\n\n\n\n    &lt;script type="text/javascript" src="{% static "/admin/js/core.js" %}"&gt;&lt;/script&gt;\n    &lt;script type="text/javascript" src="{% static "/admin/js/SelectFilter2.js" %}"&gt;&lt;/script&gt;\n    &lt;script type="text/javascript" src="{% static "/admin/js/admin/RelatedObjectLookups.js" %}"&gt;&lt;/script&gt;\n    &lt;script type="text/javascript" src="{% static "/admin/js/actions.js" %}"&gt;&lt;/script&gt;\n    &lt;script type="text/javascript" src="{% static "/admin/js/calendar.js" %}"&gt;&lt;/script&gt;\n    &lt;script type="text/javascript" src="{% static "/admin/js/admin/DateTimeShortcuts.js" %}"&gt;&lt;/script&gt;\n</code></pre>\n'}, {'answer_id': 51459403, 'author': 'potemkin', 'author_id': 10115957, 'author_profile': 'https://Stackoverflow.com/users/10115957', 'pm_score': 1, 'selected': False, 'text': '<p>I use this, it\'s great, but I have 2 problems with the template:</p>\n\n<ol>\n<li>I see the calendar icons <strong>twice</strong> for every filed in template. </li>\n<li><p>And for TimeField I have \'<strong>Enter a valid date.</strong>\'</p>\n\n<p><img src="https://i.stack.imgur.com/cg1D4.png" alt="Here is a screenshot of the Form"></p></li>\n</ol>\n\n<p><strong>models.py</strong></p>\n\n<pre><code>from django.db import models\n    name=models.CharField(max_length=100)\n    create_date=models.DateField(blank=True)\n    start_time=models.TimeField(blank=False)\n    end_time=models.TimeField(blank=False)\n</code></pre>\n\n<p><strong>forms.py</strong></p>\n\n<pre><code>from django import forms\nfrom .models import Guide\nfrom django.contrib.admin import widgets\n\nclass GuideForm(forms.ModelForm):\n    start_time = forms.DateField(widget=widgets.AdminTimeWidget)\n    end_time = forms.DateField(widget=widgets.AdminTimeWidget)\n    create_date = forms.DateField(widget=widgets.AdminDateWidget)\n    class Meta:\n        model=Guide\n        fields=[\'name\',\'categorie\',\'thumb\']\n</code></pre>\n'}, {'answer_id': 51893533, 'author': 'Munim Munna', 'author_id': 9276329, 'author_profile': 'https://Stackoverflow.com/users/9276329', 'pm_score': 3, 'selected': False, 'text': '<h1>For Django >= 2.0</h1>\n\n<blockquote>\n  <p><em>Note: Using admin widgets for date-time fields is not a good idea as admin style-sheets can conflict with your site style-sheets in case you are using bootstrap or any other CSS frameworks. If you are building your site on bootstrap use my bootstrap-datepicker widget <a href="https://github.com/monim67/django-bootstrap-datepicker-plus" rel="noreferrer">django-bootstrap-datepicker-plus</a>.</em></p>\n</blockquote>\n\n<p><strong>Step 1:</strong> Add <code>javascript-catalog</code> URL to your project\'s (not app\'s) <code>urls.py</code> file.</p>\n\n<pre><code>from django.views.i18n import JavaScriptCatalog\n\nurlpatterns = [\n    path(\'jsi18n\', JavaScriptCatalog.as_view(), name=\'javascript-catalog\'),\n]\n</code></pre>\n\n<p><strong>Step 2:</strong> Add required JavaScript/CSS resources to your template.</p>\n\n<pre class="lang-html prettyprint-override"><code>&lt;script type="text/javascript" src="{% url \'javascript-catalog\' %}"&gt;&lt;/script&gt;\n&lt;script type="text/javascript" src="{% static \'/admin/js/core.js\' %}"&gt;&lt;/script&gt;\n&lt;link rel="stylesheet" type="text/css" href="{% static \'/admin/css/widgets.css\' %}"&gt;\n&lt;style&gt;.calendar&gt;table&gt;caption{caption-side:unset}&lt;/style&gt;&lt;!--caption fix for bootstrap4--&gt;\n{{ form.media }}        {# Form required JS and CSS #}\n</code></pre>\n\n<p><strong>Step 3:</strong> Use admin widgets for date-time input fields in your <code>forms.py</code>.</p>\n\n<pre><code>from django.contrib.admin import widgets\nfrom .models import Product\n\nclass ProductCreateForm(forms.ModelForm):\n    class Meta:\n        model = Product\n        fields = [\'name\', \'publish_date\', \'publish_time\', \'publish_datetime\']\n        widgets = {\n            \'publish_date\': widgets.AdminDateWidget,\n            \'publish_time\': widgets.AdminTimeWidget,\n            \'publish_datetime\': widgets.AdminSplitDateTime,\n        }\n</code></pre>\n'}, {'answer_id': 55099684, 'author': 'Arindam Roychowdhury', 'author_id': 1076965, 'author_profile': 'https://Stackoverflow.com/users/1076965', 'pm_score': 0, 'selected': False, 'text': '<p>My Django Setup : 1.11\nBootstrap: 3.3.7</p>\n\n<p>Since none of the answers are completely clear, I am sharing my template code which presents no errors at all. </p>\n\n<p><strong>Top Half of template:</strong></p>\n\n<pre><code>{% extends \'base.html\' %}\n{% load static %}\n{% load i18n %}\n\n{% block head %}\n    &lt;title&gt;Add Interview&lt;/title&gt;\n{% endblock %}\n\n{% block content %}\n\n&lt;script type="text/javascript" src="{% url \'javascript-catalog\' %}"&gt;&lt;/script&gt;\n&lt;script type="text/javascript" src="{% static \'admin/js/core.js\' %}"&gt;&lt;/script&gt;\n&lt;link rel="stylesheet" type="text/css" href="{% static \'admin/css/forms.css\' %}"/&gt;\n&lt;link rel="stylesheet" type="text/css" href="{% static \'admin/css/widgets.css\' %}"/&gt;\n&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" &gt;\n&lt;script type="text/javascript" src="{% static \'js/jquery.js\' %}"&gt;&lt;/script&gt;\n</code></pre>\n\n<p><strong>Bottom Half:</strong></p>\n\n<pre><code>&lt;script type="text/javascript" src="/admin/jsi18n/"&gt;&lt;/script&gt;\n&lt;script type="text/javascript" src="{% static \'admin/js/vendor/jquery/jquery.min.js\' %}"&gt;&lt;/script&gt;\n&lt;script type="text/javascript" src="{% static \'admin/js/jquery.init.js\' %}"&gt;&lt;/script&gt;\n&lt;script type="text/javascript" src="{% static \'admin/js/actions.min.js\' %}"&gt;&lt;/script&gt;\n{% endblock %}\n</code></pre>\n'}, {'answer_id': 62181628, 'author': 'sandeep', 'author_id': 10084728, 'author_profile': 'https://Stackoverflow.com/users/10084728', 'pm_score': 0, 'selected': False, 'text': "<p>June 3, 2020 (All answers didn't worked, you can try this solution I used. Just for TimeField)</p>\n\n<p>Use simple <code>Charfield</code> for time fields (<strong>start</strong> and <strong>end</strong> in this example) in forms.</p>\n\n<p><strong>forms.py</strong> </p>\n\n<p>we can use <code>Form</code> or <code>ModelForm</code> here.</p>\n\n<pre><code>class TimeSlotForm(forms.ModelForm):\n    start = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'HH:MM'}))\n    end = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'HH:MM'}))\n\n    class Meta:\n        model = TimeSlots\n        fields = ('start', 'end', 'provider')\n</code></pre>\n\n<p>Convert string input into time object in views.</p>\n\n<pre><code>import datetime\ndef slots():\n    if request.method == 'POST':\n        form = create_form(request.POST)\n        if form.is_valid():                \n            slot = form.save(commit=False)\n            start = form.cleaned_data['start']\n            end = form.cleaned_data['end']\n            start = datetime.datetime.strptime(start, '%H:%M').time()\n            end = datetime.datetime.strptime(end, '%H:%M').time()\n            slot.start = start\n            slot.end = end\n            slot.save()\n</code></pre>\n"}, {'answer_id': 63823273, 'author': 'andyw', 'author_id': 960471, 'author_profile': 'https://Stackoverflow.com/users/960471', 'pm_score': 2, 'selected': False, 'text': '<p>Here\'s another 2020 solution, inspired by @Sandeep\'s. Using the MinimalSplitDateTimeMultiWidget found in this <a href="https://gist.github.com/andytwoods/76f18f5ddeba9192d51dccc922086e43?fbclid=IwAR1x4GbeHLMQypWKaYPGn55r92-uCmJZqLUf4kEAGeX4DTgalt2GQUNY7oQ" rel="nofollow noreferrer">gist</a>, in our Form as below, we can use modern browser date and time selectors (via eg \'type\': \'date\'). We don\'t need any JS.</p>\n<pre><code>class EditAssessmentBaseForm(forms.ModelForm):\n    class Meta:\n        model = Assessment\n        fields = \'__all__\'\n\n    begin = DateTimeField(widget=MinimalSplitDateTimeMultiWidget())\n</code></pre>\n<p><a href="https://i.stack.imgur.com/Kn2WN.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Kn2WN.gif" alt="enter image description here" /></a></p>\n'}, {'answer_id': 68451933, 'author': 'rrretry', 'author_id': 11354529, 'author_profile': 'https://Stackoverflow.com/users/11354529', 'pm_score': 2, 'selected': False, 'text': "<p>Another simple solution for <strong>Django 3 (3.2) in 2021</strong> ;) cause andyw's solution doesn't work in Firefox...</p>\n<pre><code>{% load static %}\n\n{% block extrahead %}\n{{ block.super }}\n&lt;script type=&quot;text/javascript&quot; src=&quot;{% static 'admin/js/cancel.js' %}&quot;&gt;&lt;/script&gt;\n&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;{% static 'admin/css/forms.css' %}&quot;&gt;\n&lt;script src=&quot;{% url 'admin:jsi18n' %}&quot;&gt;&lt;/script&gt;\n&lt;script src=&quot;{% static 'admin/js/jquery.init.js' %}&quot;&gt;&lt;/script&gt;\n&lt;script src=&quot;{% static 'admin/js/core.js' %}&quot;&gt;&lt;/script&gt;\n{{ form.media }}\n{% endblock %}\n\n&lt;form action=&quot;&quot; method=&quot;post&quot;&gt;\n{% csrf_token %}\n{{ form.as_p }}\n&lt;input type=&quot;submit&quot; value=&quot;Сохранить&quot;&gt;\n&lt;/form&gt;\n</code></pre>\n<p>and you'll able to use your form.\nexample:</p>\n<pre><code>from django.contrib.admin import widgets\ndate_time = forms.SplitDateTimeField(widget=widgets.AdminSplitDateTime)\n</code></pre>\n"}]
['https://Stackoverflow.com/questions/38601', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/2592/']