Existe alguma opção de estilo para o seletor de data HTML5?

109

Estou muito feliz com o seletor de data HTML5. É revigorante saber que o W3C está finalmente conseguindo um pouco da folga, então não precisamos ficar reinventando uma forma tão comum de entrada.

A ressalva é que não vejo ou prevejo muito na maneira de aplicar cores ao seletor em si, o que tornará o uso do seletor de data uma espécie de quebra de negócio na maioria dos sites. O <select>sofre de hacks generalizados de substituição de javascript pela simples razão de que as pessoas não conseguem torná-lo bonito. Estou curioso para saber se alguém sabe o que está acontecendo nas terras do W3C?

Isso está um pouco emparelhado com outra questão maior (caso você saiba a resposta): Vale a pena tentar me envolver com o W3C ou WHATWG para que algumas dessas coisas vejam a luz do dia? Qualquer tipo de percepção é útil.

Wray Bowling
fonte
Não tentei devido à falta de suporte que tinha, mas acho que o estilo é mínimo com base na <select>entrada.
James Coyle
Devo dizer que as coisas avançam muito lentamente no mundo W3C. Os desenvolvedores / empresas de navegadores preferirão ir para onde houver interesse. Eles (navegadores) relutarão em implementar coisas que não estão bem especificadas no W3C (e preparar esses documentos leva tempo). Mais as pessoas mais rápido as coisas podem ser alcançadas. Então, sim, se você tiver interesse, entre na lista de mala direta e comece a se envolver.
lepe

Respostas:

220

Os oito pseudo-elementos a seguir são disponibilizados pelo WebKit para personalizar uma caixa de texto de entrada de data:

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

Portanto, se você pensou que a entrada de data poderia usar mais espaçamento e um esquema de cores ridículo, você poderia adicionar o seguinte:

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

Captura de tela

Anselm
fonte
2
usar input [type = "date"] funcionou para meus propósitos e talvez funcione para outra pessoa também.
Elon Zito
Existe uma maneira de alterar o caractere separador que alguém conhece?
Keith Ivison
2
Observe que você também pode definir o estilo do botão Limpar com a pseudoclasse::-webkit-clear-button
Gabriel Duarte
@Anselm Existe uma maneira de abrir o selecionador de data clicando dentro da caixa de texto?
Forforotofly
Uma fonte para essas pseudo-classes tornaria esta resposta ainda melhor ...
Macaco Herege
22

Atualmente, não há um navegador cruzado e uma maneira livre de script de estilizar um selecionador de data nativo.

Quanto ao que está acontecendo dentro do WHATWG / W3C ... Se essa funcionalidade surgir, provavelmente estará sob o padrão CSS-UI ou algum padrão relacionado ao Shadow DOM . A página wiki do CSS4-UI lista algumas coisas relacionadas à aparência que foram retiradas do CSS3-UI, mas para ser honesto, não parece haver muito interesse no módulo CSS-UI.

Eu acho que sua melhor aposta para o desenvolvimento em vários navegadores agora é implementar controles bonitos com interface baseada em JavaScript e, em seguida, desabilitar a IU nativa do HTML5 e substituí-la. Acho que no futuro, talvez haja um estilo de controle nativo melhor, mas talvez o mais provável seja a capacidade de trocar um controle nativo por seu próprio "widget" Shadow DOM.

É irritante que isso não esteja disponível, e solicitar suporte padrão sempre vale a pena. Embora pareça que o líder do jQuery UI tentou e não teve sucesso .

Embora tudo isso seja muito desanimador, também vale a pena considerar as vantagens do seletor de data HTML5 e também por que os estilos personalizados são difíceis e talvez devam ser evitados. Em algumas plataformas, o selecionador de data parece extremamente diferente e eu pessoalmente não consigo pensar em nenhuma maneira genérica de estilizar o selecionador de data nativo.

Cameron
fonte
E um ano e meio depois, ainda não existe uma maneira de crosbrowser de estilizá-los. Além disso, não há nem mesmo uma entrada de data para crossbrowser! IE e FF ainda não cooperam.
Sr. Lister,
2
Temos algum hoje?
aks de
12

encontrei isso no github do Zurb

Caso você queira fazer um estilo mais personalizado. Aqui está todo o CSS padrão para renderização do webkit dos componentes de data.

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
fonte
1
Obrigado, Justin! As coisas estão realmente parecendo mais brilhantes com o passar dos meses. Especialmente com o Shadow DOM sendo mais facilmente exposto no inspetor da web do Chrome.
Wray Bowling de
3

Usei uma combinação das soluções acima e algumas tentativas e erros para chegar a essa solução. Demorou muito tempo, então espero que isso possa ajudar alguém no futuro. Também percebi que a entrada do seletor de data não é de todo suportada pelo Safari ...

Estou usando componentes estilizados para renderizar uma entrada de selecionador de data transparente, conforme mostrado na imagem abaixo:

imagem da entrada do selecionador de data

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
fonte
2

Você pode usar o seguinte CSS para definir o estilo do elemento de entrada.

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
fonte
Existe uma maneira de abrir o seletor de data clicando dentro da caixa de texto?
Forforotofly
0

FYI, eu precisava atualizar a cor do ícone de calendário que não parecia possível com propriedades como color, fill, etc.

Acabei descobrindo que algumas filterpropriedades ajustarão o ícone, então embora eu não tenha conseguido descobrir como torná-lo de qualquer cor, felizmente tudo que eu precisava era torná-lo de forma que o ícone ficasse visível em um fundo escuro para que eu pudesse faça o seguinte:

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>

Espero que isso ajude algumas pessoas, pois na maior parte do tempo o cromo diz que isso é impossível.

Braden Rockwell Napier
fonte
1
Existe uma maneira de abrir o seletor de data clicando dentro da caixa de texto?
Forforotofly