Member Avatar for Dani

I use <input type="date"> and it works fine to bring up a date picker in Chrome and Firefox. However, it behaves as a normal textbox in Safari.

  • 3 Contributors
  • 4 Replies
  • 43K Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by rproffitt

Dani AI

Generated

You were right at the time: older desktop Safari rendered type="date" as a plain text box. Since Apr 29, 2021, Safari 14.1 on macOS ships a native date (and time/datetime-local) picker, matching what you see in Chrome and Firefox; iOS Safari has had these pickers for years. If you upgrade Safari, you should get the native control. New WebKit Features in Safari 14.1. Also note the submitted value is always normalized to yyyy-mm-dd regardless of the UI’s locale formatting, which helps with consistent server handling. MDN: input type=date.

For broad compatibility and accessibility, keep a progressive-enhancement fallback so older Safari versions and niche browsers remain usable. A minimal pattern is:

<input id="start" name="start" type="date" required>
<script>
  (function () {
    var probe = document.createElement('input');
    probe.setAttribute('type', 'date');
    var supportsDate = (probe.type === 'date');

    if (!supportsDate) {
      var el = document.getElementById('start');
      el.type = 'text';
      el.placeholder = 'YYYY-MM-DD';
      el.pattern = '\\d{4}-\\d{2}-\\d{2}';
      el.inputMode = 'numeric';
    }
  }());
</script>

This keeps native pickers where available and provides clear guidance and basic validation elsewhere. MDN: input type=date, New WebKit Features in Safari 14.1.

Recommended Answers

All 4 Replies

Member Avatar for gentlemedia

Desktop Safati doesn't support the date input (yet).

Edited by gentlemedia
Member Avatar for Dani

And my boyfriend doesn't understand why I don't use Safari. :-/

Member Avatar for rproffitt

Bonus information: http://www.iwanttouse.com/#input-datetime shows how badly this is implemented across browsers. Maybe a third of users won't be able to use a page with input datetime.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.