#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 [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/django-updates/068.1f651be7cba4b7cc2e9445749723815a%40djangoproject.com.
