web-dev-qa-db-fra.com

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

Je suis vraiment content du sélecteur de date HTML5. Il est réconfortant de savoir que le W3C prend enfin une partie du relais afin de ne pas avoir à réinventer une forme d’information aussi commune.

La mise en garde est que je ne vois pas ou ne prévois pas beaucoup dans la manière d'appliquer des couleurs au sélecteur lui-même, ce qui rendra l'utilisation du sélecteur de dates un peu comme un briseur de transaction sur la plupart des sites. Le <select> souffre de piratages 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 sur les terres du W3C?

Ceci est en quelque sorte associé à une autre question plus importante (au cas où vous connaissez la réponse): Vaut-il la peine de mon temps pour essayer de m'impliquer avec le W3C ou le WHATWG afin que certaines de ces choses voient le jour? Toute sorte d’idées est utile.

html5datepickerw3c
89
Wray Bowling

Les huit pseudo-éléments suivants sont rendus disponibles par WebKit pour la personnalisation de 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 pensiez que l'entrée de 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">

Screenshot

196
Anselm

Actuellement, il n’existe pas de moyen de styliser un sélecteur de date natif entre navigateurs et sans script.

En ce qui concerne ce qui se passe à l'intérieur de WHATWG/W3C ... Si cette fonctionnalité est disponible, elle sera probablement conforme à la norme CSS-UI ou à une autre norme liée à Shadow DOM -. Le 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 que le CSS-UI suscite beaucoup d'intérêt. module.

Je pense que votre meilleur pari pour le développement multi-navigateurs en ce moment 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 qu'à l'avenir, il y aura peut-être un meilleur style de contrôle natif, mais peut-être plus vraisemblablement la possibilité d'échanger un contrôle natif pour votre propre "widget" Shadow DOM.

Il est agaçant que cette solution ne soit pas disponible et il est toujours utile de demander une assistance standard. Bien que cela semble être l’avance de jQuery UI a essayé et a échoué .

Bien que cela soit très décourageant, il convient également de prendre en compte les avantages du sélecteur de date HTML5 et également pourquoi les styles personnalisés sont difficiles et doivent peut-être être évités. Sur certaines plates-formes, le datepicker semble extrêmement différent et personnellement, je ne peux penser à aucun moyen générique de styliser le datepicker natif.

18
Cameron

trouvé ceci sur github de Zurb

Au cas où vous souhaiteriez personnaliser davantage le style. 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;
}
11
Justin Moore

J'ai utilisé une combinaison des solutions ci-dessus et quelques essais et erreurs pour en arriver à cette solution. Cela m'a pris beaucoup de temps, donc 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'était pas du tout prise en charge par Safari ...

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

image of date picker input

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

Vous pouvez utiliser le CSS suivant pour styler 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="" />
2
vignesh waran