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

109

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.

Wray Bowling
la source
Je ne l'ai pas essayé en raison du manque de support, mais je suppose que le style est minimal en fonction de l' <select>entrée.
James Coyle
Je dois dire que les choses avancent très lentement dans le monde du W3C. Les développeurs / entreprises de navigateurs préféreront se déplacer là où il y a de l'intérêt. Ils (les navigateurs) seront réticents à mettre en œuvre des choses qui ne sont pas bien spécifiées dans le W3C (et la préparation de ces documents prend du temps). Plus les gens sont plus rapides, les choses peuvent être réalisées. Alors, oui, si vous avez de l'intérêt, rejoignez leur liste de diffusion et commencez à vous impliquer.
lepe

Réponses:

220

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

Capture d'écran

Anselme
la source
2
l'utilisation de l'entrée [type = "date"] a fonctionné pour mes besoins et peut-être que cela fonctionnera aussi pour quelqu'un d'autre.
Elon Zito
Y a-t-il un moyen de changer le caractère de séparation que quelqu'un sait?
Keith Ivison
2
Notez que vous pouvez également styliser le bouton clair avec la pseudo-classe::-webkit-clear-button
Gabriel Duarte
@Anselm Existe-t-il un moyen d'ouvrir le sélecteur de date en cliquant dans la zone de texte?
oubliez le
Une source pour ces pseudo-classes en ferait une réponse encore meilleure ...
Heretic Monkey
22

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.

Cameron
la source
Et un an et demi plus tard, il n'y a toujours pas de façon crosbrowser de les coiffer. De plus, il n'y a même pas d'entrée de date crossbrowser! IE et FF ne coopèrent toujours pas.
Mr Lister
2
En avons-nous aujourd'hui?
aks le
12

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;
}
Justin Moore
la source
1
Merci, Justin! Les choses semblent vraiment plus brillantes au fil des mois. Surtout avec le Shadow DOM étant plus facilement exposé dans l'inspecteur Web de Chrome.
Wray Bowling
3

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:

image de l'entrée du sélecteur de date

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;}
`
Jean-Marie Dalmasso
la source
2

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

vignesh waran
la source
Existe-t-il un moyen d'ouvrir le sélecteur de date en cliquant dans la zone de texte?
oubliez le
0

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.

Braden Rockwell Napier
la source
1
Existe-t-il un moyen d'ouvrir le sélecteur de date en cliquant dans la zone de texte?
oubliez le