Не понимаю как включать placeholder после нажатия на кнопку ОЧИСТИТЬ. Мне нужно показывать либо дату либо placeholder.
Подскажите, пожалуйста, как быть
Вот мой код
body {
background-color: #f0f5f9;
}
.pa__top-sec {
padding: 50px 0;
}
.pa__top-title {
margin-bottom: 20px;
color: #455582;
font: 14px "Gilroy-Extrabold", sans-serif;
}
.pa__middle-range {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 50px;
}
.pa__middle-item {
margin-right: 10px;
}
.pa__top-sec input[type="date"] {
border: 0;
padding: 12px 20px;
color: #99a2ba;
font-size: 14px;
}
.pa__top-sec input[type="date"]:not(.has-value):before {
content: attr(placeholder);
width: 100%;
font: 14px "Gilroy-Extrabold", sans-serif;
}
.btn-accent {
color: #fff;
background-color: #ff8007;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.btn {
font: 14px "Gilroy-Extrabold", sans-serif;
font-weight: 800;
text-align: center;
padding: 15px 30px;
border-radius: 5px;
text-decoration: none;
border: 0;
cursor: pointer;
}
<body>
<form class="pa__top-sec">
<div class="pa__top-title btn-sec">Поиск по дате</div>
<div class="pa__middle-range">
<div class="pa__middle-item"><input class="pa__middle-input text" type="date" name="date" placeholder="От" onchange="this.className=(this.value!=''?'has-value':'')"></div>
<div class="pa__middle-item"> <input class="pa__middle-input text" type="date" name="date" placeholder="До" onchange="this.className=(this.value!=''?'has-value':'')"></div>
<div class="pa__middle-btn">
<button class="btn btn-accent" type="reset">Очистить</button>
</div>
</div>
</form>
</body>