How do I change the input type="date" placeholder value in Angular?

Question

I have come across this and found many solutions but none fits my issue.

<input type="date" #evtDate required name="evtDate" placeholder="Select Event Date" id="evtDate" formControlName="eventDate">

It's displayed on the browser as:

I want to show a string placeholder here, something like:

I achieved this using CSS like,

input[type="date"]::before {
  content: attr(placeholder);
  width: 100%;
}
input[type="date"]:focus::before,
input[type="date"]:valid::before { display: none }

This part has an issue here when I click on its date icon, the date input is again changed to normal format, like:

If I don't use this CSS part, it still shows the custom placeholder value but doesn't update anything on the input.

// input[type="date"]:focus::before,
   // input[type="date"]:valid::before { display: none }

I also checked that there's some dynamic HTML created for this input type="data", and that needs to be kept for data to set in that format.

Can anyone please suggest how this can be done? Thanks in advance!

have you tried [this one](https://stackoverflow.com/a/37886488/3681565)? — Gaspar, Apr 01 '19 at 13:41
@Gaspar yes it worked. In one case where I reset my form, I just remove the appended 'has-value' class from the input control and then it resets correctly as well. Thanks :) — Abhishek, Apr 01 '19 at 14:11
glad to know :), try on Firefox now, because of this "Does not work on Firefox. – Patronaut Feb 2 '18 at 17:29" — Gaspar, Apr 01 '19 at 14:14

score 1 · Answer 1 · answered Apr 01 '19 at 13:19

1

You can try these code

<input type="text" placeholder="Date" onfocus="(this.type='date')"/>

answered Apr 01 '19 at 13:19

Bhagwat Tupe

1,905
1
13
28

Boris Adamyan · Answer 2 · 2022-04-06T07:37:50.100

0

onfocus="(this.type='date')" onblur="(this.type='text')"

HTML<------>
  <div>
    <label for="date">Date : </label>
    <input placeholder="Your Date" type="text" onfocus="(this.type='date')" onblur="(this.type= this.value ? 'date' : 'text')">
  </div>

edited Apr 06 '22 at 07:37

answered Apr 01 '19 at 13:18

Boris Adamyan

350
2
14

This doesn't work. On focus, the view is first changed to input type="date" and then the placeholder is replaced from "Select Event Date" to "mm/dd/yyyy" and then I get to perform anything. – Abhishek Apr 01 '19 at 13:34
in first time you see a placeholder "YOUR TEXT" when u click in input type is changed and view is change to date format, when you clear a input a text come back – Boris Adamyan Apr 01 '19 at 13:47
1

onfocus="(this.type='date')" onblur="(this.type= this.value ? 'date' : 'text')" – Mikhail Kislitsyn Apr 06 '22 at 06:29

How do I change the input type="date" placeholder value in Angular?

2 Answers2