Opened 80 minutes ago
#37083 new Cleanup/optimization
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
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.