id	summary	reporter	owner	description	type	status	component	version	severity	resolution	keywords	cc	stage	has_patch	needs_docs	needs_tests	needs_better_patch	easy	ui_ux
33100	"Request for a DateInput class that provides a date picker via the HTML <input style=""date""> element"	dennisvang	nobody	"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 feature	new	Forms	3.2	Normal				Unreviewed	0	0	0	0	0	0