how to configure default value of html date input

Question

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/

score 1 · Accepted Answer · answered Jul 15 '14 at 22:59

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

EternalHour · Answer 2 · 2014-07-16T00:27:50.990

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

score 0 · Answer 3 · edited May 23 '17 at 10:26

0

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

edited May 23 '17 at 10:26

Community

1
1

answered Jul 15 '14 at 22:42

Filo

2,829
1
21
36

I need the field itself to be changed, not the label around it. – hannah Jul 15 '14 at 22:44
It can't be changed with placeholder attribute, give a look to the list I posted. – Filo Jul 15 '14 at 22:46
I know that, the question I'm asking is if there is a way to not have the value in a "yyyy-mm-dd" format. – hannah Jul 15 '14 at 22:48
Unfortunately it's not possible, see this related question: http://stackoverflow.com/questions/7372038/is-there-any-way-to-change-input-type-date-format – Filo Jul 15 '14 at 22:53

Dave Salomon · Answer 4 · 2014-07-15T23:14:48.043

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

http://jsfiddle.net/daveSalomon/AY2mp/1/

I know that, I am trying to figure out if there is a workaround to changing the input value. — hannah, Jul 15 '14 at 22:46
@hannah Apolgies, I misread the question. Updated my answer. Short = No, long = yes with hackery. Don't do this. Use a textfield and a datepicker control. My 2 pence... — Dave Salomon, Jul 15 '14 at 23:15

how to configure default value of html date input

4 Answers4