Angular: Как изменить тип ввода = значение даты

Question

Я сталкивался с этим и нашел много решений, но ни одно не соответствует моей проблеме.

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

Это отображается в браузере как:

Я хочу показать строковый заполнитель здесь, что-то вроде:

Я добился этого с помощью CSS, как,

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

Эта часть имеет проблему здесь, когда я нажимаю на иконку даты, ввод даты снова меняется на нормальный формат, например:

Если я не использую эту часть CSS, она по-прежнему показывает пользовательское значение заполнителя, но ничего не обновляет на входе.

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

Я также проверил, что существует некоторый динамический HTML, созданный для этого ввода type="data", и его необходимо сохранить, чтобы данные были установлены в этом формате.

Кто-нибудь может подсказать, пожалуйста, как это можно сделать? Заранее спасибо!

Answer 1

Вы можете попробовать этот код

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

Answer 2

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

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