JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<input type="date" id="my-date" />
<script>
    const dateField = document.getElementById('my-date');
    dateField.addEventListener('change', (ev) => {
        if (ev.target.value) {
        ev.target.classList.add('has-value');
        } else {
        ev.target.classList.remove('has-value');
        }
    });
</script>

CSS

input[type="date"]::-webkit-datetime-edit-day-field, 
    input[type="date"]::-webkit-datetime-edit-month-field, 
    input[type="date"]::-webkit-datetime-edit-year-field {
        opacity: var(--field-opacity, 0);
        content: 'dd'
    }

    input[type="date"].has-value {
        --field-opacity: 1;
    }