JSFiddle - React, Tailwind, and code Playground

by Felis Catus

HTML

<div class='flx'>
<input type="datetime-local">
<div class='filler'>
</div>
</div>
<button>
clock
</button>
<br>
<div class='flx'>
<input type="datetime-local" datetimeformat="dd/MM/y, h:mm a">
<div class='filler'>
</div>
</div>

CSS

input::-webkit-datetime-edit {
  background: red;
}
.flx {
  display: flex;
  flex-direction: row;
  border: 1px solid blue;
  width: 300px;
}
input {
  flex: 1 1 auto;
  width: auto;
}
.filler {
  flex: 1 1 99%;
}

JavaScript

(function(){
	document.querySelector('input').value='2020-10-02T09:10';
  document.querySelector('button').addEventListener('click', function(){
  	console.log(document.querySelector('input').value);
    document.querySelector('.filler').innerText=(document.querySelector('input').getBoundingClientRect().width)
  })
})()