how to hide the default placeholder dd/mm/yyyy in the input type date?

Question

I need to remove the default placeholder in the date input type

i have done like this

<input
id="date-picker"
ref="dateEle"
v-model="selectedDate"
type="date"
class="block w-full select-none rounded-lg border bg-transparent p-3.5 text-transparent placeholder-shown:text-transparent focus:border-onLight-300 focus:text-transparent focus:ring-onLight-300 active:text-transparent"`your text`
/>

but it is not working when i click on the clander icon it shows a small selection and there we can see that placeholder`

Don't use `type="date"`. The details of how it displays are browser-dependent and I don't think you have much control over it. — Barmar, Jun 22 '23 at 06:13
[Check this out](https://stackoverflow.com/questions/20321202/not-showing-placeholder-for-input-type-date-field) — NeERAJ TK, Jun 22 '23 at 06:17

score 0 · Answer 1 · answered Jun 22 '23 at 06:22

0

You can add this styles

::-webkit-datetime-edit-year-field:not([aria-valuenow]),
::-webkit-datetime-edit-month-field:not([aria-valuenow]),
::-webkit-datetime-edit-day-field:not([aria-valuenow]) {
    color: transparent;
}

answered Jun 22 '23 at 06:22

Red Hat

1
2

how to hide the default placeholder dd/mm/yyyy in the input type date?

1 Answers1