Remove placeholder from date type input in chrome [duplicate]

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.

Answer 1

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')">

Answer 2

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>