8

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.

David
  • 437
  • 2
  • 10
  • 26

3 Answers3

5

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">
Dally S
  • 619
  • 9
  • 11
  • 1
    This seems to work mostly ok, however on iOS 9.x when I first tap the input, it gets stuck somewhere between a text input state and the date input state. – Craig Presti - MSFT Mar 14 '16 at 23:21
  • Yeah, the problem with this is that it requires two taps. One to change it to date, one to actually get the datepicker open. – Alex May 13 '17 at 16:58
  • This was my solution as well. Unfortunately it doesn't work on iOS, as I'm having the same issue as @CraigPresti-MSFT. Did anybody get a solution after all these years? – Guilherme Taffarel Bergamin Feb 17 '22 at 21:36
2

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

Guillaume Gendre
  • 2,504
  • 28
  • 17
  • 1
    You could use: `content:attr(placeholder);` To allow the HTML to set the content. – William George Apr 01 '15 at 15:51
  • great idea! will give it a try and update my answer, thanks. This should allow to clean up a little the JS code – Guillaume Gendre Apr 06 '15 at 17:02
  • We now use this code into our Cobalt hybrid framework (http://cobaltians.org) where we developed a native datePicker component to ease the use of inputs like this. This framework can also help you with native transition between pages and native action bars – Guillaume Gendre Mar 22 '16 at 14:48
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

Jasonw
  • 5,054
  • 7
  • 43
  • 48
  • Sorry, I probably didn't explain it the best. It needs to remain as input type=date. This is what it currently looks like: http://img.photobucket.com/albums/v605/MANU80/e24e70b5.jpg , I want to get rid of that closing date text and have something similar to the dropdown menu above it. – David Mar 08 '12 at 18:54
  • Updated the input type to date. That essentially add a "placeholder" using javascript to the input. – Jasonw Mar 08 '12 at 19:07
  • I'm afraid its still not working, the placeholder attribute works on desktop but I dont think it applies to safari, its still showing up as a blank dropdown menu. – David Mar 08 '12 at 19:19
  • Has any progress been made on this? Thanks – Evanss Apr 19 '12 at 16:44
  • @Kai sorry, missed your statements previously. See the updated answer. I've tested that jsfiddle link using html5 supported browser which at this time, it is opera (version 11.61 build 1250). The "Closing Date" label appear on the input date field itself and if a date is selected from the drop down calendar, the value is now display. – Jasonw Apr 20 '12 at 04:05
  • Credit should be given to this [author](http://www.alistapart.com/articles/makingcompactformsmoreaccessible/) – Jasonw Apr 20 '12 at 04:07
  • Are there any errors in this code? Adding it below my js which is loaded on document ready causes all my js to stop working. thanks $("document").ready( function (){ }); – Evanss Apr 20 '12 at 09:08
  • I don't think there is any error in the code as I've provide the code to jsfiddle in the answer? Your question is entirely another question and you will want to create another question for that. – Jasonw Apr 20 '12 at 09:15
  • Hi @Jasonw, it is possible to hide placeholder default of input "type=date" in mobile screen (responsive test mode) on desktop version? – Loc_rabbirt Aug 03 '15 at 06:10
  • Really, I don't know keyword to research it, because the type date not allow text, the default format (mm/dd/yy) impossible to hidden :(. Sorry for my knowledge. You can see desktop version: http://i.imgur.com/w96j8h3.jpg The responsive version test with Google Chrome responsive tool: http://i.imgur.com/nofjM3a.jpg Actually, your solution work good on iphone, but I don't know how to hide the default value of date and time on desktop. – Loc_rabbirt Aug 05 '15 at 04:38