HTML5 date field and placeholder text in Safari

Question

I've got an issue, but I'm not sure if it's something I'm doing wrong, or if this feature just isn't supported yet.

Basically I have the following lines of code:

<input type="text" name="lastname" id="lastname" value="" placeholder="Last name" />

<input type="date" name="dob" id="dob" value="" placeholder="Date of birth" />

I've tested this on the desktop version of Safari and all good, but when I test it on the iPad, the second input doesn't show the placeholder text. Does anyone know if placeholder text is supported on type="date" on the iPad?

Cheers Nick

score 12 · Accepted Answer · answered Dec 08 '11 at 15:49

12

The iPad is doing the correct thing. The placeholder attribute isn't supported on input elements on type date. It's probably working on desktop Safari because that doesn't support the date type, so that attribute is being ignored and you're left with a plain text field. You could check in the DOM inspector.

answered Dec 08 '11 at 15:49

robertc

74,533
18
193
177

2

Cheers. Thanks for the link to a great resource too! Bookmarked for later use. Must say this feels a little strange that you are able to have placeholder text on some text fields, but not others. What if I wanted to add the format as a placeholder for instance - 'dd/mm/yy'? – Sniffer Dec 13 '11 at 08:30
But that's the point, a date input isn't supposed to be a text field. – robertc Dec 13 '11 at 08:57
Semantics. It's an input field then, that on an iPad rather than brings up the normal keyboard on focus brings up a datepicker selection. – Sniffer Dec 14 '11 at 18:15
Of course it's semantics. That's the whole point of having different types of `input` in the first place. The format for a correctly implemented `date` input is *always* yyyy-mm-dd. You're not supposed to be able to free type it, you're supposed to pick it from a control. – robertc Dec 14 '11 at 19:38
3

but what if you're using the placeholder as a label, which is the case with some mobile layouts? then it becomes an annoyance. – Jason Apr 26 '12 at 22:01
Your scenario is not really a proper use of the placeholder field - that's what labels and legends and such are for. Ultimately I agree with you that the browser should be responsible for clearly marking the field as a date input and providing a way for designers to customize it. In the meantime if you just want something to show up by default in the field you can set the value attribute to a date formatted like "YYYY-MM-DD", it will at least render with a pre-populated value but one caveat - if this is a required field your users may not feel compelled to manually change it. – jrz Oct 10 '12 at 20:25
I wish I could get the placeholder to say "Alarm will ring on 12/31/2013" instead of simply "Dec 31, 2013", which requires a label to be placed outside of the input field. – Phillip Senn Aug 15 '13 at 17:08

score 7 · Answer 2 · answered Feb 11 '14 at 15:41

Slight hack bit here goes...

Initially have the field as a text field. When the user focuses on the field switch the fields type to date and re-focus.

tested in ios6

HTML

<input type="text" placeholder="DOB" id="dob" />

JS

<script>

    var textbox = document.getElementById('dob')
        textbox.onfocus = function (event) {
            this.type = 'date';
            this.focus();
    }

</script>

score 3 · Answer 3 · answered Apr 20 '15 at 17:16

3

Using the solution of sidarcy:

<input type="date" name="dob" id="dob" value="" 
   placeholder="Date of birth"  
   onfocus="this.type='date';this.focus();" 
   onblur="if(this.value == '') this.type='text';"/>

answered Apr 20 '15 at 17:16

MarianaAFSilva

445
2
7

score 3 · Answer 4 · answered Aug 19 '16 at 02:37

3

CSS for iOS Safari:

input[type='date']:after {
  color: #aaa;
  content: attr(placeholder);
}

Then use placeholder on date input:

<input name="mydate" type="date" value="" placeholder="Select a date" />

answered Aug 19 '16 at 02:37

Rockallite

16,437
7
54
48

While this does work, the placeholder remains even after selecting a value (at least it does for `time` types) – sMyles Oct 31 '17 at 21:45
3

@sMyles I solved this doing `input[type='date']:empty:after {...` – dacastro4 Nov 20 '18 at 14:20

score -3 · Answer 5 · edited Jul 09 '20 at 01:04

add this to header

<script type="text/javascript">
    var datefield = document.createElement("input")
    datefield.setAttribute("type", "date")
    if (datefield.type != "date") { //if browser doesn't support input type="date", load files for jQuery UI Date Picker
        document.write('<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />\n')
        document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"><\/script>\n')
        document.write('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"><\/script>\n')
    }
    if (datefield.type != "date") { //if browser doesn't support input type="date", initialize date picker widget:
        jQuery(function($) { //on document.ready
            $('input[type="date"]').datepicker();
            $('input[type="date"]').attr('placeholder', 'dd.mm.rrrr');
        });
    }
</script>

HTML5 date field and placeholder text in Safari

5 Answers5

Linked