JSFiddle - React, Tailwind, and code Playground

by mahdiar_mansouri

HTML

<input type="date" placeholder="Date" onfocus="transform(this)" onblur="revert(this)">
<label for="date" >Date</label>
<style>
    input[value=""]+label{
      background : red;
    }
    input[value]+label{
      background : yellow 
    }
    label{
      color : blue;
    }
</style>
<script>

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');
}
</script>