HTML5 date field and placeholder text in Safari

By | January 12, 2018
Questions:

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

Answers:

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.

Questions:
Answers:

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>

Questions:
Answers:

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';"/>

Questions:
Answers:

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" />

Leave a Reply

Your email address will not be published. Required fields are marked *