#33100: Add a DateInput widget 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 | Resolution:
Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-----------------------------+--------------------------------------
Description changed by dvg:
Old description:
> 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`.
New description:
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`, although
localization could complicate matters here (haven't looked into that yet).
--
--
Ticket URL: <https://code.djangoproject.com/ticket/33100#comment:3>
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 django-updates+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/django-updates/068.1f651be7cba4b7cc2e9445749723815a%40djangoproject.com.
