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.

What you're looking for is not to change the `input` type? From `date` to `text`? Or I didn't get your question. — emerson.marini, Jul 29 '14 at 15:07
@MelanciaUK - I am looking to remove the `mm-dd-yyyy` placeholder. The text that is displayed in the input by default, before any value is selected. — Elad Lachmi, Jul 29 '14 at 15:41
Maybe this can help you: http://stackoverflow.com/questions/11387655/disable-new-chrome-date-types-input-formatting-and-placeholder — emerson.marini, Jul 29 '14 at 15:47
@MelanciaUK - Thanks for the reply. I looked at that question before. I think it has more to do with the date format that is displayed. — Elad Lachmi, Jul 30 '14 at 07:05
@Maks3w Maybe, but since my question is older, technically, that is a duplicate of this and not the other way around... — Elad Lachmi, Mar 02 '16 at 08:22
I choose this way because the target does not have references to jQuery — Maks3w, Mar 02 '16 at 08:25

score 21 · Answer 1 · answered Dec 09 '15 at 13:22

21

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

answered Dec 09 '15 at 13:22

Jeroen Bellemans

2,049
2
25
42

That's a nice trick! – Lukos Feb 16 '16 at 16:24
Working perfect Very original solution :) gz – catalin87 Mar 23 '16 at 00:31
5

It should be `` – Hai Nguyen Apr 25 '16 at 20:17
Very nice man, Like! – Loves2Develop Sep 19 '16 at 12:40
2

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 – Luke C Dec 30 '16 at 10:14

int32_t · Accepted Answer · 2016-08-03T12:07:37.530

8

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>

edited Aug 03 '16 at 12:07

answered Jul 29 '14 at 23:53

int32_t

5,774
1
22
20

This has no effect at all, and also you are missing the actual selector and an opening brace. – Elad Lachmi Jul 30 '14 at 07:04
Oh, I'm sorry for the missing '{'. But it should work if you add {. http://jsfiddle.net/int32_t/DA3Nn/ – int32_t Jul 30 '14 at 07:18
Sorry, you`re 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 Jul 30 '14 at 07:53
1

Just wanted to add that the selector for the slash separators is `::-webkit-datetime-edit-text:not([aria-valuenow])` – Elad Lachmi Jul 30 '14 at 09:38
10

This no longer works. – Adambean Feb 19 '18 at 13:29

Remove placeholder from date type input in chrome

2 Answers2

Linked