Apakah ada opsi gaya untuk pemilih Tanggal HTML5?

Saya sangat senang dengan pemilih tanggal HTML5. Sangat menyegarkan untuk mengetahui bahwa W3C akhirnya mengambil beberapa kelonggaran sehingga kami tidak perlu terus-menerus menemukan kembali bentuk input yang umum seperti itu.

Peringatannya adalah bahwa saya tidak melihat atau meramalkan banyak cara menerapkan warna pada pemetik itu sendiri yang akan membuat penggunaan tipe datepicker sebagai pemecah kesepakatan di sebagian besar situs. The <select>menderita dari hacks javascript-pengganti luas karena alasan sederhana bahwa orang tidak bisa membuatnya cukup. Saya penasaran apakah ada yang tahu apa yang terjadi di negeri W3C?

Ini agak dipasangkan dengan pertanyaan lain yang lebih besar (jika Anda tahu jawabannya): Apakah sepadan dengan waktu saya untuk mencoba terlibat dengan W3C atau WHATWG sehingga beberapa dari hal-hal ini terlihat terang hari? Segala jenis wawasan sangat membantu.

Delapan pseudo-elemen berikut disediakan oleh WebKit untuk menyesuaikan kotak teks input tanggal:

::-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

Jadi jika Anda mengira masukan tanggal dapat menggunakan lebih banyak spasi dan skema warna yang konyol, Anda dapat menambahkan yang berikut ini:

::-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">

Saat ini, tidak ada cara lintas browser, bebas skrip untuk mengatur gaya pemilih tanggal asli.

Adapun apa yang terjadi di dalam WHATWG / W3C ... Jika fungsi ini muncul, kemungkinan akan berada di bawah standar CSS-UI atau beberapa standar terkait Shadow DOM . The CSS4-UI halaman wiki daftar yang terkait penampilan-beberapa hal yang dijatuhkan dari CSS3-UI, tapi jujur, ada tampaknya tidak menjadi banyak kepentingan dalam modul CSS-UI.

Saya pikir taruhan terbaik Anda untuk pengembangan lintas browser saat ini, adalah menerapkan kontrol cantik dengan antarmuka berbasis JavaScript, dan kemudian menonaktifkan UI asli HTML5 dan menggantinya. Saya pikir di masa mendatang, mungkin akan ada gaya kontrol bawaan yang lebih baik, tetapi mungkin lebih mungkin untuk menukar kontrol asli untuk "widget" Shadow DOM Anda sendiri.

Ini menjengkelkan karena ini tidak tersedia, dan mengajukan petisi untuk dukungan standar selalu bermanfaat. Meskipun sepertinya pimpinan jQuery UI telah mencoba dan tidak berhasil .

Meskipun ini semua sangat mengecewakan, ada baiknya juga mempertimbangkan keuntungan dari pemilih tanggal HTML5, dan juga mengapa gaya kustom sulit dan mungkin harus dihindari. Pada beberapa platform, datepicker terlihat sangat berbeda dan saya pribadi tidak dapat memikirkan cara umum untuk menata datepicker asli.

menemukan ini di github Zurb

Jika Anda ingin melakukan gaya kustom lagi. Inilah semua CSS default untuk rendering webkit dari komponen tanggal.

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;
}

Saya menggunakan kombinasi dari solusi di atas dan beberapa trial and error untuk mendapatkan solusi ini. Butuh waktu yang cukup lama, jadi saya harap ini bisa membantu orang lain di masa depan. Saya juga memperhatikan bahwa input pemilih tanggal sama sekali tidak didukung oleh Safari ...

Saya menggunakan komponen bergaya untuk membuat input pemilih tanggal transparan seperti yang ditunjukkan pada gambar di bawah ini:

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;}
`

Anda dapat menggunakan CSS berikut untuk mengatur gaya elemen input.

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, saya perlu untuk memperbarui warna ikon kalender yang tampaknya tidak mungkin dengan sifat seperti color, fill, dll

Saya akhirnya mengetahui bahwa beberapa filterproperti akan menyesuaikan ikon sehingga sementara saya tidak menemukan cara membuatnya menjadi warna apa pun, untungnya yang saya butuhkan hanyalah membuatnya sehingga ikon terlihat pada latar belakang yang gelap sehingga saya dapat melakukannya. lakukan hal berikut:

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>

Mudah-mudahan ini membantu beberapa orang karena sebagian besar chrome bahkan secara langsung mengatakan ini tidak mungkin.