“input type=date” placeholder on iOS?

Question

I'm currently developing a website aimed at iPhones/ iPads.

Setting the input type to date changes the field appearance to a drop down menu, and the placeholder attribute that works with text fields only shows on the desktop version, not on the iphone. Is there a way around this?

This is how it currently looks; http://i44.tinypic.com/2u91xsz.png

I want to get rid of that closing date text and have something similar to the dropdown menu above it.

Its basically just so that I can let the user know what they are entering without the need to use any extra space on the screen, so its not the biggest issue if there is no solution.

Answer 1

Took me a while figuring this one out, leave it as type="text", and add onfocus="(this.type='date')"

i even like the onblur i've seen mentioned

<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="date">

Answer 2

the placeholder attribute that works with text fields only shows on the desktop version, not on the iphone. Is there a way around this?

Try using javascript and css.

<div id="closing_date">
<label for="closing_date_field" class="overlabel">Closing Date</label>
<input id="closing_date_field" type="date" name="closing_date">
</div>

see the code here

Answer 3

I've made it work with some ":before" pseudo-class and a small bit of javascript. You will have to have a class or id on your input. Here is a sample with an id of "myInput"

 #myInput:before{ content:"Date of birth"; width:100%; color:#AAA; } 
 #myInput:focus:before,
 #myInput.not_empty:before{ content:none }

Then in javascript, add the "not_empty" class depending on the value in the onChange and onKeyUp events.

You can even add all of this dynamically on every date fields.

Here is a rough code to do this :

$('input[type=date]').each(function(){
    var input=$(this);
    var id=input.attr('id');
    if (!id){
        id='RandomGeneratedId_'+Math.random().toString(36).substring(7);
        input.attr('id',id);
    }
    var placeholder=input.attr('placeholder');
    if (placeholder){
        $('head').append('<style> #'+id+':before{ content:"'+placeholder+'"; width:100%; color:#AAA; } #'+id+':focus:before,#'+id+'.not_empty:before{ content:none }</style>');
    }
    input.on('change keyup',function(){
        if ($(this).val()){
            $(this).addClass('not_empty')
        }else{
            $(this).removeClass('not_empty')
        }
        return false;
    });
});

It's not perfect but it's working well in Chrome and iOS7 webviews