#33100: Request for a DateInput class that provides a date picker via the HTML
<input style="date"> element
---------------------------------------+------------------------
Reporter: dvg | Owner: nobody
Type: New feature | Status: new
Component: Forms | Version: 3.2
Severity: Normal | Keywords:
Triage Stage: Unreviewed | Has patch: 0
Needs documentation: 0 | Needs tests: 0
Patch needs improvement: 0 | Easy pickings: 0
UI/UX: 0 |
---------------------------------------+------------------------
To support this request, consider that the StackOverflow question
[https://stackoverflow.com/q/38601 "Using Django time/date widgets in
custom form"] gets an average of almost **10k views each year** (which is
a lot).
== Background
The `forms.DateField` uses a
[https://docs.djangoproject.com/en/3.2/ref/forms/widgets/#dateinput
forms.widgets.DateInput] widget, which renders as a standard `<input
style="text">` in HTML (a simple text box).
It would be very convenient if this widget could provide a date picker by
default, similar to date fields on the Django admin site, for example.
There are several options here:
- One could use the
[https://docs.djangoproject.com/en/3.2/ref/forms/widgets/#selectdatewidget
forms.widgets.SelectDateWidget], but that is not as convenient as a proper
calendar date picker.
- One could use the Django
[https://github.com/django/django/blob/main/django/contrib/admin/widgets.py#L49
admin date (and/or time) widgets], but, as far as I know, the admin
widgets are not part of the public API, and getting them to work can be a
puzzle.
- There are also third-party apps that implement date pickers, but those
introduce additional dependencies.
- Last, but not least, [[https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/input/date#browser_compatibility | modern
browsers support the HTML `<input style="date">` element]], which provides
a very clean solution to the problem described above, without any custom
CSS or JavaScript.
Although it is not too difficult to implement a custom widget that uses
`<input style="date">`, one would need to know about it existence first.
== Feature request
Would it be possible to provide something like a
`forms.widgets.BrowserDateInput` that leverages `<input style="date">`?
A crude implementation could look like this:
{{{
class BrowserDateInput(forms.widgets.DateInput):
def get_context(self, name, value, attrs):
context = super().get_context(name, value, attrs)
context['widget']['type'] = 'date'
return context
}}}
To set current date and/or minimum/maximum allowable date, we can use the
`attrs` argument. For example:
{{{
BrowserDateInput(attrs=dict(value=self.today, min=self.today))
}}}
Note that the browser automatically takes care of client-side field
validation.
P.S. a similar request could be made for a `BrowserTimeInput`.
--
Ticket URL: <https://code.djangoproject.com/ticket/33100>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.
--
You received this message because you are subscribed to the Google Groups
"Django updates" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/django-updates/053.ccefe96712957fac86cf9ab724bc0322%40djangoproject.com.
