Opened 3 years ago

Last modified 2 years ago

#33100 closed New feature

Add a DateInput widget that provides a date picker via the HTML <input style="date"> element — at Version 3

Reported by: dennisvang Owned by: nobody
Component: Forms Version: 3.2
Severity: Normal Keywords:
Cc: Triage Stage: Unreviewed
Has patch: no Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: no UI/UX: no

Description (last modified by dennisvang)

To support this request, consider that the StackOverflow question 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 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 Django 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.

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

Change History (3)

comment:1 by dennisvang, 3 years ago

Summary: Request for a DateInput class that provides a date picker via the HTML <input style="date"> elementRequest for a DateInput widget that provides a date picker via the HTML <input style="date"> element

comment:2 by dennisvang, 3 years ago

Summary: Request for a DateInput widget that provides a date picker via the HTML <input style="date"> elementAdd a DateInput widget that provides a date picker via the HTML <input style="date"> element

comment:3 by dennisvang, 3 years ago

Description: modified (diff)
Note: See TracTickets for help on using tickets.
Back to Top