I know that the html date input field defaults to "mm/dd/yyyy", but was wondering if there was a way to overwrite that with text to say something like "pick a date".
I have tried changing the value and placeholder attributes like so:
<input type="date" placeholder="Pick a Date"> <input type="date" value="Pick a Date"> but it ultimately doesn't seem to work as I assume it's expecting some sort of ISO date. Any ideas?
Example in a fiddle: http://jsfiddle.net/AY2mp/
An alternative is to use the jQuery date selector that uses an input field instead of date field so that the value and placeholder attributes can be used:
http://jqueryui.com/datepicker/
html
<input type="text" id="datepicker" value="The Date"> js
$(function() { $( "#datepicker" ).datepicker(); }); I believe you could do it like this. I am no javascript guru so there may be a more efficient way to do it, but it gets the job done.
Of course you will need to change the selectors.
Fiddle: http://jsfiddle.net/ce2P7/
HTML
<div class="date1"> <input type="text" placeholder="Please choose a date" value=""> </div> <div class="date2"> <input class="date" type="date" value=""> </div> CSS
.date1 { width: 150px; /* For consistency */ } .date2 { width: 150px; /* For consistency */ display: none; } JAVASCRIPT
<script> $(function(){ $("input").one("click", function () { $(".date1").hide(); $(".date2").show(); }); }); </script> EDIT: I had to change things a bit, realized it wasn't working properly
The date type doesn't support placeholder attribute. Also, the WebKit implementation says it's fixed.
related answer: https://stackoverflow.com/a/12869288/3625883
you should use a label instead. (simple jsfiddle example: http://jsfiddle.net/7L4tb/ )
<label for="test">Test Date :</label> <input id="test" type="date" value="2014-07-14" /> 
Placeholder isn't supported. Value should be in RFC3339 format yyyy-mm-dd.
For full details, see http://www.w3.org/TR/html-markup/input.date.html
Edit now that I read the question correctly...
No, the field must contain a well formatted date. It cannot contain text. Either use a text field and add something like jQuery UI's DatePicker, or use some awful jQuery hackery with absolutely positioned div's covering the datefields - if yuo absolutely must use a date field.
$(document).ready(function () { var i = 0; $('input[type="date"]').each(function () { var dfEl = $(this); var str = '<div class="datePlaceholder" id="divph' + i + '">Choose a date</div>'; dfEl.after(str); var phEl = $('#divph' + i); var dateFieldPos = dfEl.offset(); phEl.css({ top: dateFieldPos.top + 1, left: dateFieldPos.left + 1, width: $(this).width() + 1, height: $(this).height() + 1 }); phEl.click(function () { $(this).hide(); dfEl.focus(); }); dfEl.blur(function () { if (!dfEl.val()) { phEl.show(); } }); i++; }); }); 
