Các tùy chọn định dạng cho HTML5 Date Picker

Giới thiệu về <input type="date">

Trình duyệt hiển thị date picker gốc (native) với giao diện tùy thuộc vào OS/trình duyệt. Việc tùy chỉnh giao diện bị hạn chế do shadow DOM, nhưng có thể can thiệp qua pseudo-elements WebKit/Blink.

Pseudo-elements có thể style (Chỉ WebKit/Blink: Chrome, Edge, Safari, Opera)

Ví dụ tùy chỉnh giao diện

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <title>Custom Date Picker</title>
  <style>
    .custom-date-input {
      padding: 0.75rem;
      border: 2px solid #ddd;
      border-radius: 8px;
      font-size: 1rem;
      width: 100%;
      max-width: 300px;
      background: white;
      transition: border-color 0.3s, box-shadow 0.3s;
    }
    
    .custom-date-input:focus {
      outline: none;
      border-color: #3498db;
      box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
    }
    
    /* Tùy chỉnh popup calendar (chỉ WebKit/Blink) */
    .custom-date-input::-webkit-datetime-edit {
      padding: 0.5rem;
      font-family: inherit;
    }
    
    .custom-date-input::-webkit-datetime-edit-fields-wrapper {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 4px;
      padding: 0.25rem 0.5rem;
    }
    
    .custom-date-input::-webkit-datetime-edit-text {
      color: white;
      padding: 0 0.25rem;
    }
    
    .custom-date-input::-webkit-datetime-edit-month-field,
    .custom-date-input::-webkit-datetime-edit-day-field,
    .custom-date-input::-webkit-datetime-edit-year-field {
      color: white;
      font-weight: 600;
    }
    
    .custom-date-input::-webkit-datetime-edit-month-field:focus,
    .custom-date-input::-webkit-datetime-edit-day-field:focus,
    .custom-date-input::-webkit-datetime-edit-year-field:focus {
      background: rgba(255,255,255,0.2);
      border-radius: 2px;
    }
    
    .custom-date-input::-webkit-calendar-picker-indicator {
      background: #3498db;
      border-radius: 4px;
      padding: 0.25rem;
      cursor: pointer;
      filter: invert(1);
      transition: background 0.3s;
    }
    
    .custom-date-input::-webkit-calendar-picker-indicator:hover {
      background: #2980b9;
    }
    
    .custom-date-input::-webkit-clear-button {
      filter: invert(1);
      opacity: 0.7;
      cursor: pointer;
    }
    
    .custom-date-input::-webkit-clear-button:hover {
      opacity: 1;
    }
  </style>
</head>
<body>
  <label>Ngày sinh:</label>
  <input type="date" class="custom-date-input" id="birthdate">
  
  <script>
    // Set max date = hôm nay
    document.getElementById('birthdate').max = new Date().toISOString().split('T')[0];
  </script>
</body>
</html>

Hạn chế quan trọng

• Firefox: Không hỗ trợ pseudo-elements WebKit, dùng UI hệ thống
• Safari iOS: Hiển thị wheel picker gốc, không style được
• Định dạng ngày: Luôn là YYYY-MM-DD (ISO 8601) trong value, không thể thay đổi
• ::-webkit-calendar-picker-indicator có thể ẩn: display: none

Giải pháp cross-browser: Thư viện JavaScript

Để giao diện nhất quán mọi trình duyệt, dùng thư viện:

• Flatpickr - Nhẹ, không dependency, tùy chỉnh cao
• Datepicker (vanilla-js) - Hiện đại, accessible
• Day.js + custom UI - Cho kiểm soát hoàn toàn

// Flatpickr example
import flatpickr from "flatpickr";
import "flatpickr/dist/flatpickr.min.css";

flatpickr("#birthdate", {
  dateFormat: "d/m/Y",
  locale: "vn",
  maxDate: "today",
  allowInput: true,
  clickOpens: true
});

Thuộc tính hữu ích khác

<input type="date" 
       min="2000-01-01" 
       max="2024-12-31" 
       step="7" 
       value="2024-01-15"
       required
       readonly>

• min/max: Giới hạn khoảng ngày cho phép
• step: Bước nhảy (mặc định 1 ngày, ví dụ 7 = chỉ chọn ngày cách 7 ngày)
• readonly: Chỉ cho chọn từ picker, không nhập tay