HTML5 date and time picker controls

HTML5 introduced native date and time picker controls, simplifying the handling of date and time inputs in forms. These controls provide a better user experience, support mobile devices, and reduce the need for JavaScript libraries.

Date Picker Control <input type="date">

The type="date" control allows users to select a date, displayed in the year-month-day format. Different browsers may render it differently, but the functionality remains consistent.

<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">

Extended Attributes

• min/max: Restrict the selectable date range
• step: Set date increments (e.g., step="7" for weekly selection)
• value: Set a default value (format must be YYYY-MM-DD)

<input type="date" min="2023-01-01" max="2023-12-31" step="7">

Time Picker Control <input type="time">

The type="time" provides a 24-hour time picker, though some browsers may display an AM/PM toggle.

<label for="meeting-time">Meeting Time:</label>
<input type="time" id="meeting-time" name="meeting-time" value="09:00">

Time Precision Control

Use the step attribute to set minute intervals:

<!-- Options every 15 minutes -->
<input type="time" step="900">  <!-- 900 seconds = 15 minutes -->

<!-- Precision to the second -->
<input type="time" step="1">

Combined Date-Time Controls

Local Date-Time <input type="datetime-local">

This control combines date and time selection without timezone information:

<input type="datetime-local" id="local-datetime" name="local-datetime">

Month Selection <input type="month">

Specifically for selecting year and month:

<input type="month" id="start-month" name="start-month">

Week Selection <input type="week">

Displays year + week number (ISO week format):

<input type="week" id="week-select" name="week-select">

Styling Customization and Compatibility

While native controls are convenient, their styling is limited. Enhance them with the following methods:

Pseudo-Element Customization

/* For Webkit browsers */
input[type="date"]::-webkit-calendar-picker-indicator {
  background: url(calendar-icon.png);
  padding: 0;
  margin: 0;
}

Feature Detection and Fallback

if (!Modernizr.inputtypes.date) {
  // Load a polyfill or display a plain text input
  $('input[type="date"]').datepicker();
}

Data Format Handling

Getting and Setting Values

const dateInput = document.getElementById('birthday');
console.log(dateInput.valueAsDate);  // Returns a Date object
console.log(dateInput.valueAsNumber); // Returns a timestamp

// Set value via Date object
const now = new Date();
dateInput.valueAsDate = now;

Form Submission Format

When submitting forms, date control values are converted to string formats:

• date → "YYYY-MM-DD"
• time → "HH:MM"
• datetime-local → "YYYY-MM-DDTHH:MM"

Mobile Optimization

Mobile devices automatically display touch-friendly interfaces:

• iOS shows a wheel picker
• Android displays a calendar-style popup
• Numeric keyboards appear automatically for input

<!-- Disable special keyboard on mobile -->
<input type="date" inputmode="none">

Validation and Constraints

Built-in validation checks date ranges:

<input type="date" required min="2023-01-01" max="2023-12-31">

Provide feedback via CSS:

input:invalid {
  border-color: red;
}
input:valid {
  border-color: green;
}

Internationalization Considerations

Date format variations across regions:

• Use the lang attribute to declare language
• Some browsers adjust formats based on system language

<input type="date" lang="fr-FR">

Practical Example

Complete appointment form example:

<form id="appointment-form">
  <fieldset>
    <legend>Appointment Details</legend>
    
    <div>
      <label for="appointment-date">Date:</label>
      <input type="date" id="appointment-date" 
             min="2023-06-01" required>
    </div>
    
    <div>
      <label for="appointment-time">Time:</label>
      <input type="time" id="appointment-time"
             min="09:00" max="18:00" step="1800" required>
    </div>
    
    <div>
      <label for="reminder">Reminder Time:</label>
      <input type="datetime-local" id="reminder"
             step="3600">
    </div>
  </fieldset>
  
  <button type="submit">Submit Appointment</button>
</form>

<script>
  document.getElementById('appointment-form').addEventListener('submit', (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    console.log(Object.fromEntries(formData));
  });
</script>

Browser Support Status

Modern browsers generally support these controls:

• Chrome/Edge ≥ 20
• Firefox ≥ 57
• Safari ≥ 14.1
• iOS Safari ≥ 5
• Android Browser ≥ 4.4

For older IE browsers, a polyfill is needed:

<!-- Load datepicker polyfill -->
<script src="https://cdn.jsdelivr.net/npm/date-input-polyfill@2.14.0/dist/date-input-polyfill.min.js"></script>
<link rel="stylesheet" href="date-input-polyfill.css">

Performance Considerations

Advantages of native controls over JavaScript solutions:

• No dependency on external libraries
• Better performance on mobile
• Automatic inheritance of system preferences (e.g., dark mode)
• Lower memory usage

Tests show native date pickers initialize 3-5x faster than popular date picker libraries.