HTML / CSS - input text Mask date, time

Asked

Viewed 3,438 times

4

I am a beginner in the area and I do not have much knowledge, I have the following code, and I would like it to be filled only with numbers and in the format "00/00/0000" and "00:00" respectively. I know there are other means, but I would like to know how to do this using only css. It is possible? 

<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"/>
html css

  • I’m getting beat up even from this program... wrote td but only put up to this part :/

  • Now it worked

  • From a look here https://answall.com/questions/136089/cria-mascara-phonesome-html-css/136112. As far as I know, you can’t do this with css alone, better use javascript or any other programming language

  • Thank God... I’ll have to do with you.

  • See https://answall.com/questions/6526/como-formatr-data-no-javascript

  • It can only be done with css yes, I am that you need an element inside the input and not the default placeholder

  • @hugocsl... how do I do this?

Show 2 more comments

2 answers

3

Alternatively, you can also use the new types of HTML5 inputs, which are of the type date and time.

Your syntax would be:

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

As a reference, follow two links if you want to know more!

Input Date

Input Time

  • Victor Jordan... tmb already tried with these guys, but they are too boring to edit, I could not adjust width height, wanted to take tmb the arrow that appears the calendar, tmb could not put a placeholder, etc...

  • @Fares Layout adjustments are easily applied through classes or by passing the property directly as well as the calendar arrow. I changed the code to illustrate it. What I really couldn’t do was apply the placeholder :(

  • There’s a code changed to take a look

2


Fares I had spoken in the comment of the possibility to do only with css, but I believe that it is not worth much, because you would have to take the placeholder default field and then put another...

So the solution I give you and changing the kind of input click how you can test below. So there is less code involved and you get a very cool result that should suit you. Briefly when you focus on input he changes the type of text for the kind you define onfocus="(this.type='time')" etc and when you click off it goes back to 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')"/>

  • Look how cool.... I like it.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.