CODEWITHSUNDEEP
htmlangular
Abhishek
Abhishek

Reputation: 2034

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

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:

enter image description here

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

enter image description here

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:

enter image description here

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.

enter image description here

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

Upvotes: 3

Views: 10736

Answers (2)

Boris Adamyan
Boris Adamyan

Reputation: 378

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>

Upvotes: 0

Bhagwat Tupe
Bhagwat Tupe

Reputation: 1943

You can try these code

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

Upvotes: 1

Related Questions