Có bất kỳ tùy chọn kiểu nào cho bộ chọn Ngày HTML5 không?

Tôi thực sự thích thú với công cụ chọn ngày HTML5. Thật sảng khoái khi biết rằng W3C cuối cùng cũng giải quyết được một số điểm thiếu sót để chúng tôi không phải tiếp tục phát minh lại một dạng đầu vào phổ biến như vậy.

Lưu ý là tôi không nhìn thấy hoặc dự đoán được nhiều về cách áp dụng màu sắc cho chính công cụ chọn sẽ khiến việc sử dụng công cụ chọn ngày trở thành một công cụ phá vỡ thỏa thuận trên hầu hết các trang web. Nó <select>bị tấn công thay thế javascript phổ biến vì lý do đơn giản là mọi người không thể làm cho nó đẹp. Tôi tò mò không biết có ai biết chuyện gì đang xảy ra ở vùng đất W3C không?

Điều này phần nào được ghép nối với một câu hỏi khác lớn hơn (trong trường hợp bạn biết câu trả lời): Có đáng để tôi dành thời gian tham gia vào W3C hoặc WHATWG để một số trong số những thứ này được nhìn thấy ánh sáng ban ngày không? Bất kỳ loại thông tin chi tiết nào đều hữu ích.

Tám phần tử giả sau đây được cung cấp bởi WebKit để tùy chỉnh hộp văn bản của đầu vào ngày:

::-webkit-datetime-edit
::-webkit-datetime-edit-fields-wrapper
::-webkit-datetime-edit-text
::-webkit-datetime-edit-month-field
::-webkit-datetime-edit-day-field
::-webkit-datetime-edit-year-field
::-webkit-inner-spin-button
::-webkit-calendar-picker-indicator

Vì vậy, nếu bạn nghĩ rằng đầu vào ngày tháng có thể sử dụng nhiều khoảng cách hơn và một bảng màu vô lý, bạn có thể thêm như sau:

::-webkit-datetime-edit { padding: 1em; }
::-webkit-datetime-edit-fields-wrapper { background: silver; }
::-webkit-datetime-edit-text { color: red; padding: 0 0.3em; }
::-webkit-datetime-edit-month-field { color: blue; }
::-webkit-datetime-edit-day-field { color: green; }
::-webkit-datetime-edit-year-field { color: purple; }
::-webkit-inner-spin-button { display: none; }
::-webkit-calendar-picker-indicator { background: orange; }

<input type="date">

Hiện tại, không có trình duyệt chéo, không có tập lệnh nào để tạo kiểu cho bộ chọn ngày gốc.

Đối với những gì đang diễn ra bên trong WHATWG / W3C ... Nếu chức năng này xuất hiện, nó có thể sẽ nằm dưới tiêu chuẩn CSS-UI hoặc một số tiêu chuẩn liên quan đến Shadow DOM . Các CSS4-UI trang wiki danh sách một vài điều xuất hiện liên quan đến đã được giảm từ CSS3-UI, nhưng thành thật mà nói, có vẻ không phải là một mối quan tâm lớn trong các mô-đun CSS-UI.

Tôi nghĩ rằng đặt cược tốt nhất của bạn để phát triển trình duyệt chéo ngay bây giờ, là triển khai các điều khiển đẹp với giao diện dựa trên JavaScript, sau đó tắt giao diện người dùng gốc HTML5 và thay thế nó. Tôi nghĩ trong tương lai, có thể sẽ có kiểu điều khiển gốc tốt hơn, nhưng có lẽ nhiều khả năng sẽ có khả năng hoán đổi điều khiển gốc cho "widget" Shadow DOM của riêng bạn.

Thật khó chịu khi điều này không có sẵn và việc yêu cầu hỗ trợ tiêu chuẩn luôn đáng giá. Mặc dù có vẻ như khách hàng tiềm năng của jQuery UI đã thử nhưng không thành công .

Mặc dù điều này rất không khuyến khích, nhưng cũng nên xem xét những ưu điểm của công cụ chọn ngày HTML5 và cũng là lý do tại sao các kiểu tùy chỉnh lại khó và có lẽ nên tránh. Trên một số nền tảng, trình chọn ngày trông cực kỳ khác biệt và cá nhân tôi không thể nghĩ ra bất kỳ cách chung nào để tạo kiểu trình chọn ngày gốc.

tìm thấy cái này trên github của Zurb

Trong trường hợp bạn muốn thực hiện thêm một số kiểu tạo kiểu tùy chỉnh. Đây là tất cả CSS mặc định để hiển thị trên webkit của các thành phần ngày tháng.

input[type="date"] {
     -webkit-align-items: center;
     display: -webkit-inline-flex;
     font-family: monospace;
     overflow: hidden;
     padding: 0;
     -webkit-padding-start: 1px;
}

input::-webkit-datetime-edit {
    -webkit-flex: 1;
    -webkit-user-modify: read-only !important;
    display: inline-block;
    min-width: 0;
    overflow: hidden;
}

input::-webkit-datetime-edit-fields-wrapper {
    -webkit-user-modify: read-only !important;
    display: inline-block;
    padding: 1px 0;
    white-space: pre;
}

Tôi đã sử dụng kết hợp các giải pháp trên và một số thử nghiệm và sai sót để đi đến giải pháp này. Đã khiến tôi mất một khoảng thời gian khó chịu nên tôi hy vọng điều này có thể giúp ích cho người khác trong tương lai. Tôi cũng nhận thấy rằng đầu vào bộ chọn ngày hoàn toàn không được Safari hỗ trợ ...

Tôi đang sử dụng các thành phần được tạo kiểu để hiển thị đầu vào bộ chọn ngày trong suốt như được hiển thị trong hình ảnh bên dưới:

const StyledInput = styled.input`
  appearance: none;
  box-sizing: border-box;
  border: 1px solid black;
  background: transparent;
  font-size: 1.5rem;
  padding: 8px;
  ::-webkit-datetime-edit-text { padding: 0 2rem; }
  ::-webkit-datetime-edit-month-field { text-transform: uppercase; }
  ::-webkit-datetime-edit-day-field { text-transform: uppercase; }
  ::-webkit-datetime-edit-year-field { text-transform: uppercase; }
  ::-webkit-inner-spin-button { display: none; }
  ::-webkit-calendar-picker-indicator { background: transparent;}
`

Bạn có thể sử dụng CSS sau để tạo kiểu cho phần tử đầu vào.

input[type="date"] {
  background-color: red;
  outline: none;
}

input[type="date"]::-webkit-clear-button {
  font-size: 18px;
  height: 30px;
  position: relative;
}

input[type="date"]::-webkit-inner-spin-button {
  height: 28px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  font-size: 15px;
}

<input type="date" value="From" name="from" placeholder="From" required="" />

FYI, tôi cần phải cập nhật màu sắc của biểu tượng lịch mà dường như không thể xảy ra với các thuộc tính như color, fillvv

Cuối cùng tôi đã phát hiện ra rằng một số filterthuộc tính sẽ điều chỉnh biểu tượng vì vậy trong khi tôi vẫn chưa tìm ra cách làm cho nó có màu bất kỳ, may mắn là tất cả những gì tôi cần là làm cho nó để biểu tượng hiển thị trên nền tối nên tôi có thể làm như sau:

body { background: black; }

input[type="date"] { 
  background: transparent;
  color: white;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(100%);
}

<body>
 <input type="date" />
</body>

Hy vọng rằng điều này sẽ giúp một số người vì đối với hầu hết các phần chrome thậm chí trực tiếp nói rằng điều này là không thể.