Existe-t-il des options de style pour le sélecteur de dates HTML5?

Je suis vraiment ravi du sélecteur de date HTML5. Il est rafraîchissant de savoir que le W3C prend enfin une partie du jeu afin que nous n'ayons pas à réinventer une forme d'entrée aussi courante.

La mise en garde est que je ne vois pas ou ne prévois pas grand-chose dans la manière d'appliquer des couleurs au sélecteur lui-même, ce qui fera de l'utilisation du datpicker un facteur décisif sur la plupart des sites. Le <select>souffre de hacks généralisés de remplacement de javascript pour la simple raison que les gens ne peuvent pas le rendre joli. Je suis curieux de savoir si quelqu'un sait ce qui se passe au pays du W3C?

Ceci est en quelque sorte associé à une autre question plus large (au cas où vous connaissez la réponse): Vaut-il la peine d'essayer de m'impliquer avec le W3C ou le WHATWG pour que certaines de ces choses voient le jour? Toutes sortes d'informations sont utiles.

Les huit pseudo-éléments suivants sont mis à disposition par WebKit pour personnaliser la zone de texte d'une entrée de date:

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

Donc, si vous pensez que l'entrée de la date pourrait utiliser plus d'espacement et un jeu de couleurs ridicule, vous pouvez ajouter ce qui suit:

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

Actuellement, il n'existe pas de moyen multi-navigateur, sans script, de styliser un sélecteur de date natif.

Quant à ce qui se passe à l'intérieur de WHATWG / W3C ... Si cette fonctionnalité émerge, ce sera probablement sous la norme CSS-UI ou une norme liée à Shadow DOM . La page wiki CSS4-UI répertorie quelques éléments liés à l'apparence qui ont été supprimés de CSS3-UI, mais pour être honnête, il ne semble pas y avoir beaucoup d'intérêt pour le module CSS-UI.

Je pense que votre meilleur pari pour le développement multi-navigateurs à l'heure actuelle est d'implémenter de jolis contrôles avec une interface basée sur JavaScript, puis de désactiver l'interface utilisateur native HTML5 et de la remplacer. Je pense que dans le futur, il y aura peut-être un meilleur style de contrôle natif, mais peut-être plus probable sera la possibilité d'échanger un contrôle natif pour votre propre "widget" Shadow DOM.

Il est ennuyeux que cela ne soit pas disponible, et demander un soutien standard en vaut toujours la peine. Bien qu'il semble que le responsable de jQuery UI ait essayé et échoué .

Bien que tout cela soit très décourageant, cela vaut également la peine de prendre en compte les avantages du sélecteur de dates HTML5, ainsi que les raisons pour lesquelles les styles personnalisés sont difficiles et devraient peut-être être évités. Sur certaines plates-formes, le sélecteur de date est extrêmement différent et je ne peux personnellement penser à aucun moyen générique de styliser le sélecteur de date natif.

trouvé ça sur le github de Zurb

Au cas où vous voudriez faire un style plus personnalisé. Voici tous les CSS par défaut pour le rendu webkit des composants de date.

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

J'ai utilisé une combinaison des solutions ci-dessus et des essais et erreurs pour arriver à cette solution. Cela m'a pris un temps ennuyeux alors j'espère que cela pourra aider quelqu'un d'autre à l'avenir. J'ai également remarqué que l'entrée du sélecteur de date n'est pas du tout prise en charge par Safari ...

J'utilise des composants stylisés pour rendre une entrée de sélecteur de date transparente, comme indiqué dans l'image ci-dessous:

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

Vous pouvez utiliser le CSS suivant pour styliser l'élément d'entrée.

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="" />

Pour votre information, je avais besoin de mettre à jour la couleur de l'icône du calendrier qui ne semble pas possible avec des propriétés telles que color, fill, etc.

J'ai finalement filtercompris que certaines propriétés ajusteraient l'icône alors même si je n'ai pas fini par comprendre comment lui donner une couleur, heureusement, tout ce dont j'avais besoin était de faire en sorte que l'icône soit visible sur un fond sombre, donc j'ai pu procédez comme suit:

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>

Espérons que cela aide certaines personnes, car pour la plupart, chrome dit même directement que c'est impossible.