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

Answer 1

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>

Answer 2

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

Answer 3

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>

Answer 4

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.

Answer 5

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