Hide content of input date type using css selectors and realize an not(empty) selector

Question

I am writing a form with a date type and I see that the date input has a standard dd/gg/yyyy that is neither a value nor a placeholder, so something like this

<input type="date" placeholder="Date" value="">

would not work. Moreover,:empty does not work since the field is considered empty even if filled with a value, and hence using input[value=""] and color:transparent would hide the selected value. So one way would be to make the selector :not([value=""]), and this works for other fields adding

value="" onkeyup="this.setAttribute('value', this.value);"

to input, and using selector input[value=""] and input:not([value=""]). However onkeyup does not work on date, so it keeps empty even after chosing a value.

What do you suggest?

Answer 1

<input type="date" placeholder="Date" onfocus="transform(this)" onblur="revert(this)">
<script>

    document.querySelector('[type=date]').setAttribute('type','text')
    function transform(el){
         el.setAttribute('type','date')
    }
    function revert(el){
        if(el.value == '')
        el.setAttribute('type','text')
    }
</script>

this snippet can help you, it's not actually a solution it's a trick so try other solutions and keep this as your last chance

https://jsfiddle.net/mahdiar_mansouri/zksxe6vc/9/

here is how it works

it just changes input type on blur and focus events from text to date and reverse

====================================

Updated

this snippet also sets the current time of user machine to the input value as default

 document.querySelector('[type=date]').setAttribute('type','text')
 function transform(el){
     el.setAttribute('type','date');
    const [date, time] = formatDate(new Date()).split(' ');
    el.value = date;
 }
 function revert(el){
    if(el.value == '')
    el.setAttribute('type','text')
 }
 function formatDate(date) {
   return (
     [
       date.getFullYear(),
       padTo2Digits(date.getMonth() + 1),
       padTo2Digits(date.getDate()),
     ].join('-') +
     ' ' +
     [
       padTo2Digits(date.getHours()),
       padTo2Digits(date.getMinutes()),      
     ].join(':')
   );
 }
 function padTo2Digits(num) {
   return num.toString().padStart(2, '0');
 }

also the jsfiddle code is updated

https://jsfiddle.net/mahdiar_mansouri/zksxe6vc/16/

Update(based on OP comment

Here is the image and you can see the input[value=""]+label selector won't select adjacent label because input has value