4

Sou iniciante na area e nao tenho muito conhecimento, tenho o seguinte codigo, e gostaria que fosse prenchido apenas com numeros e no formato "00/00/0000" e "00:00" respectivamente. Sei que existem outros meios, mas gostaria de saber como fazer isso usando apenas css. E possivel?

<input type="text" id="txtdia" size="4px" style="text-align:center" placeholder="Dia"/>

<input type="text" id="txthora" size="4px" style="text-align:center" placeholder="Hora"/>
7

2 Respostas 2

3

De forma alternativa, você também pode utilizar os novos tipos de inputs do HTML5, que são os do tipo date e time.

Sua sintaxe seria:

<input id="date" type="date">

<input id="time" type="time">

.datetime {
  border: 1px solid #c9c9c9;
  border-radius: 5px;
  display: block;
  height: 35px;
  margin: 8px 0;
  width: 200px;
}

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

input[type="time"]::-webkit-inner-spin-button,
input[type="time"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}
<input id="time" class="datetime" type="time">
<input id="date" class="datetime" type="date">

Como referência, segue dois links caso queira saber mais!

Input Date

Input Time

3
  • Victor Jordan... tmb ja tentei com esses tipos, mas são muito chatos pra editar, nao consegui ajustar width height, queria tirar tmb a seta que aparece o calendario, tmb não consegui colocar um placeholder, etc...
    – fares
    19/05/2018 às 13:15
  • @fares Os ajustes de layout são facilmente aplicados através de classes ou passando a propriedade diretamente bem como a seta dos calendários. Alterei o código para exemplificar. O que realmente não teria como fazer seria aplicar o placeholder :( 19/05/2018 às 13:32
  • Tem o codigo alterado pra dar uma olhada
    – fares
    19/05/2018 às 16:04
2

Fares eu tinha falado no comentário da possibilidade de fazer so com css, mas acredito que não vale muito a pena, pois vc teria que tirar o placeholder default do campo e depois colocar outro...

Então a solução que te dou e trocando o tipo do input no click como vc pode testar abaixo. Assim tem menos código envolvido e te da um resultado bem legal que deve te atender. Resumidamente quando vc fizer o foco no input ele troca o tipo de text para o tipo que vc definir onfocus="(this.type='time')" etc e quando vc clica fora ele volta pro text

input {
    width: 160px;
}
<input type="text" id="txtdia" style="text-align:center" placeholder="Dia" onfocus="(this.type='date')" onblur="(this.type='text')"/>

    <input type="text" id="txthora" style="text-align:center" placeholder="Hora" onfocus="(this.type='time')" onblur="(this.type='text')"/>

1
  • Olha q bacana.... gostei
    – fares
    19/05/2018 às 16:45

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .