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
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
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.
<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
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.
