iOS safari messes up input type=date

Question

I'm using HTML 5's <input type="date" />. Works fine in different browsers, BUT there is always the one who messes everything up:

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

Is there a way to say iOS that the datepicker should be 100% wide? style="width:100%" does nothing. width:1000px works indeed, width:100% !important does nothing.

Thanks for the help!

Solution 1

This is the way iOS treats input type="date". I wouldn't worry about native styling. It may look off, but people using iOS are used to it.

You can use min-width:95% on the date input. It makes it fit, at least in iOS 8, and doesn't change the appearance otherwise. Though I haven't tested in Android or earlier version of iOS. Alternatively, to just center it, you can add .center-block to the input, so at least it's center and doesn't look so off.

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

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

HTML:

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

Solution 2

This fixes all my date fields on IOS.

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

Solution 3

In my case I fixed it with the "new" flexbox layout 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 demo.

Solution 4

There are two solutions for this problem as shown in below code.

For this ios issue you can use any of the solution below.

Method 1) Add c1 class css,it will increase width of control along . This it will change its UI and look like normal inputbox ie it won't show dropdown symbol (Refer Method 1 OUTPUT )

Method 2) Add c2 class css,it will just increase width of control without removing dropdown symbol (Refer Method 2 OUTPUT )

Method 1 OUTPUT

Method 2 OUTPUT

.c1{
    -webkit-appearance: none;
    -moz-appearance: none;
}

.c2{
 min-width:95%;
}

Method 1)
<input type="time" class="form-control c1" name="txtIn"
                                                id="txtIn" >






Method 2)                      
<input type="time" class="form-control c2" name="txtOut"
                                                id="txtOut" >

Solution 5

Here is a solution for bootstrap 3 form-controls within input-groups with the basics from Razvan Grigore's answer.

<div class="form-group">
  <label for="amount">Input Label</label>
  <div class="input-group">
  <div class="fixIosInputLayout">
    <input id="amount" type="time" class="form-control"/>
  </div>
  <span class="input-group-addon"> unit </span>
  </div>
</div>

/* fix for ios safari inputs width */
.fixIosInputLayout
{
  display: flex;
}
.fixIosInputLayout>input.form-control[type="date"], .fixIosInputLayout>input.form-control[type="time"]
{
  display:flex; 
  display:-webkit-flex; 
  flex: 1 0 0; 
  -webkit-flex: 1 0 0; 
  border-radius: 4px; 
}
.input-group>.fixIosInputLayout>input.form-control[type="date"], .input-group>.fixIosInputLayout>input.form-control[type="time"] 
{ 
  border-radius: 4px 0 0 4px; 
}

So makes the input full-width like other bootstrap inputs with class form-control and shows the input-group-addon (here on right side) correctly.

Preview: (it is on Chrome, on ios the value is centered.

View more solutions

Comments

[Shane S. Anderson]

If min-width solves the problem, you could also try a min-width of 100% with a box-sizing of border-box.

[Christina]

@ShaneS.Anderson box-sizing:border-box is the default for everything including :after, :before in Bootstrap. So: nope.

[Rockallite]

or -webkit-appearance: none.

[GCien]

This is for type=time not type=date

[AdamJones]

Come 2021 this is still useful. I find that the display:block may not be needed but the min height and textfield elements definitely are.