#37083 closed Cleanup/optimization (duplicate)
Add opt-in HTML5 date/time input types for form widgets
| Reported by: | Denny Biasiolli | Owned by: | |
|---|---|---|---|
| Component: | Forms | Version: | 6.0 |
| Severity: | Normal | Keywords: | datetime, date, time, inputs, admin, forms |
| Cc: | Denny Biasiolli | Triage Stage: | Unreviewed |
| Has patch: | no | Needs documentation: | no |
| Needs tests: | no | Patch needs improvement: | no |
| Easy pickings: | no | UI/UX: | yes |
Description (last modified by )
Summary
Django's DateInput, TimeInput, and DateTimeInput widgets currently render <input type="text"> unconditionally.
Modern browsers provide native date and time pickers via <input type="date">, <input type="time">, which offer a significantly better user experience—especially on mobile devices—without requiring any JavaScript.
The Django admin's vDateField and vTimeField rely on custom JavaScript (DateTimeShortcuts.js) to provide calendar and clock popups. While functional, these are less accessible and less consistent across platforms than the native browser pickers.
My idea is to add a new global setting, USE_HTML5_DATE_INPUT, that when set to True, switches these widgets to their HTML5 counterparts on an opt-in basis.
The end goal it to go back on this ticket (https://code.djangoproject.com/ticket/29822) after (if) the current one gets approved/merged.
Motivation
- Better mobile UX: Native pickers are touch-friendly and consistent with OS conventions. The current JS-based popups are difficult to use on small screens.
- Accessibility: Browser-native pickers are built with accessibility in mind (keyboard navigation, screen reader support) out of the box.
- Reduced JS overhead: When native pickers are used, the admin's
calendar.jsandDateTimeShortcuts.jsbecome unnecessary for date/time fields. - Gradual rollout: Defaulting to
Falseensures zero breaking changes. Projects can opt in when ready and validate behavior before committing.
Change History (4)
comment:1 by , 3 weeks ago
| Description: | modified (diff) |
|---|---|
| Resolution: | → duplicate |
| Status: | new → closed |
comment:2 by , 3 weeks ago
Ok thank you for the feedback, let me do a bit (lot of) research to check/cover those points and I will open a forum thread do discuss about this.
comment:3 by , 13 days ago
Hey Jacob, I'm trying to open a forum topic for this, but my findings contain a lot of links to verify/point out what I'm trying to explain and the forum won't let me create the topic because
'"An error occurred: Sorry, new users can only put 2 links in a post."'
How can I bypass this, can I send you the full forum post in markdown format so you or other users with more permissions can create the topic for me?
If so, the markdown file is here: https://www.dennybiasiolli.com/forum-post-html5-date-input.md
comment:4 by , 13 days ago
Ah, sorry to hear it. Why don't you start the topic anyway, remove all but 2 links to your own branches, and then yes, I will replace the other links for you right after.
Hi there, thanks for this. This has been discussed in a few places. (I see you've participated in some!)
First, we just merged a documentation improvement in #33113.
Some more recent updates in this forum thread and this mailing list thread.
Quoting from the first link:
So, I'll mark this as a duplicate of #21470 and #33100. However if you have an interest in pursuing this, I would suggest a forum thread (focused on date/time) to address these points:
If you can refresh this discussion, that will be a huge help. Once there is consensus to do something we can reopen the ticket. Thanks.