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++;
});
});
