IOS safari messes up type type = date

Question

I am using HTML 5 <input type="date" /> . It works fine in different browsers, BUT there is always someone who ruined everything:

The problem is the size of the field: Using Bootstrap v3.2 for design, these inputs have a form and have class="form-control" , which should make them wider (as text input above and choices below).

Is there a way to tell iOS that the date picker should be 100% wider? style="width:100%" does nothing. width:1000px really works, width:100% !important does nothing.

Thanks for the help!

Answer 1

This is the way iOS handles input type="date" . I would not worry about the native style. It can be disabled, but people using iOS use it.

You can use min-width:95% to enter the date. This makes it suitable, at least in iOS 8, and does not change the appearance. Although I have not tested Android or an earlier version of iOS. Also, to just center it, you can add a .center-block to the input, so at least it is centered and doesn't look like that.

DEMO: http://jsbin.com/civor/1/

 .input-min-width-95p {min-width:95%;} 

HTML:

 <input type="date" class="form-control input-min-width-95p" ... 

Answer 2

This captures all my date fields in iOS.

 input[type="date"] { display:block; -webkit-appearance: textfield; -moz-appearance: textfield; min-height: 1.2em; } 

Answer 3

In my case, I fixed it with the new flexbox type:

  input { display:flex; display:-webkit-flex; flex: 1 0 0; -webkit-flex: 1 0 0; } 

DEMO: http://output.jsbin.com/bugeqowamu/1

NOTE: the container must also have display: flex; as in the demonstration.

Answer 4

There are two solutions to this problem, as shown in the code below. You can use any of them.

On ios. Method 1 will increase the control width with this, it will change its user interface and look like a normal input box, that is, it will not display a drop-down character, as shown in OUTPUT method 1, and method 2 will simply increase the width of the control without deleting the drop-down character. as shown in method 2 EXIT

Method 1 EXIT

Method 2 EXIT

 .c1{ -webkit-appearance: none; -moz-appearance: none; } .c2{ min-width:95%; } 

 Method 1) <input type="time" class="form-control c1" name="txtIn" id="txtIn" > <br/><br/> <br/> Method 2) <input type="time" class="form-control c2" name="txtOut" id="txtOut" > 

Answer 5

Twitter bootstrap is mobile, and it will also work on all modern browsers ... you can use some flexible utilities ... like