<input type="date"> Inconsistencies

The Problem

On iOS Safari, <input type="date"> opens a native UIDatePicker — a spinning drum-wheel interface that pops up from the bottom of the screen. This is familiar iOS UX, but it's completely impossible to style with CSS. Any custom design system that relies on a consistent date picker widget across platforms will look different (or broken) on iOS.

Root Cause

Safari on iOS renders <input type="date"> as a native UIKit component — aUIDatePicker in "wheels" style. This is controlled at the OS level and WebKit delegates rendering entirely to native UIKit, bypassing CSS styling hooks. The value format is also normalised by iOS before being exposed to JavaScript, which can differ from other platforms.

Option 1 — Accept native behaviour, style the trigger field

The simplest approach: accept the native picker (it provides good UX for iOS users) and style only the input field itself — the visible trigger before the picker opens.

/* Style the input trigger field (not the picker) */
input[type="date"],
input[type="datetime-local"],
input[type="time"] {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 16px; /* prevent auto-zoom on iOS */
  font-family: inherit;
  width: 100%;
  background: #fff;
  color: #000;
}

/* Focus state */
input[type="date"]:focus {
  outline: none;
  border-color: #007aff;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
}

Option 2 — JavaScript date picker library

For a fully consistent cross-platform UI, use a JS library that suppresses the native picker and renders its own calendar. Flatpickr is lightweight (~16kb gzipped), zero-dependency, and works identically on all platforms.

<!-- Flatpickr: fully custom, works on iOS -->
<link rel="stylesheet" href="flatpickr.min.css">
<script src="flatpickr.min.js"></script>

<input type="text" id="datepicker" placeholder="YYYY-MM-DD">

<script>
  flatpickr("#datepicker", {
    dateFormat: "Y-m-d",
    allowInput: true,
    // Prevents iOS from showing native keyboard for the text field
    disableMobile: false,
  });
</script>

Option 3 — text input with inputmode

For simple cases, use a text input with the inputmode attribute to show a numeric keyboard and a regex pattern for validation. No picker at all.

<label for="date">Date (YYYY-MM-DD)</label>
<input
  type="text"
  id="date"
  name="date"
  inputmode="numeric"
  placeholder="2026-07-15"
  pattern="\d{4}-\d{2}-\d{2}"
  title="Enter a date in YYYY-MM-DD format"
>

Browser Support

Further Reading

• MDN: <input type="date">
  Full reference for the date input type including notes on mobile behaviour.
• Can I Use: date input
  Browser compatibility for date, time, datetime-local inputs across browsers.
• Flatpickr documentation
  Lightweight, dependency-free date picker library with full CSS customisation.