Remove placeholder from date type input in chrome

Question

I have the following input:

<input class="AccordionLeft" id="operationDate" name="OperationDate" type="date" value="">

This shows the date format as a default placeholder. I would like to remove this placeholder and just have an empty input field.

If I do this:

`$('#operationDate').val('@DateTime.Now.ToString("yyyy-MM-dd")');`

I get today`s date as the placeholder, but if I use this:

$('#operationDate').val('');

I get the placeholder like dd-mm-yyyy. Can the placeholder be removed entirly? I have seen several posts about changing the date format, but have found none about removing the placeholder completley.

Solution 1

You can hide the format placeholder with the following style rule:

<style>
::-webkit-datetime-edit-year-field:not([aria-valuenow]),
::-webkit-datetime-edit-month-field:not([aria-valuenow]),
::-webkit-datetime-edit-day-field:not([aria-valuenow]) {
    color: transparent;
}
</style>
<input type=date>

Solution 2

You could achieve a nice effect using onfocus and onfocusout, along with some CSS.

<input name="date" type="text" onfocus="(this.type='date')" onfocusout="(this.type='text')">

Comments

[Elad Lachmi]

This has no effect at all, and also you are missing the actual selector and an opening brace.

[int32_t]

Oh, I'm sorry for the missing '{'. But it should work if you add {. jsfiddle.net/int32_t/DA3Nn

[Elad Lachmi]

Sorry, youre right. I had something I tried overriding the placeholder. Can you add the missing {` for completeness and I'll undo the downvote. Thank you.

[Elad Lachmi]

Just wanted to add that the selector for the slash separators is ::-webkit-datetime-edit-text:not([aria-valuenow])

[Lukos]

That's a nice trick!

[catalin87]

Working perfect Very original solution :) gz

[Hai Nguyen]

It should be <input name="date" type="text" onfocus="(this.type='date')" onblur="if(!this.value)this.type='text'">

[Loves2Develop]

Very nice man, Like!

[Luke C]

Unfortunately, as of Dec 2016, this does not work on iOS. It renders the input field as text on load and does not re-render when the input type is dynamically altered with JS

[Adambean]

This no longer works.