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-код= "данные", и это необходимо сохранить, чтобы данные могли быть заданы в этом формате.

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

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>