JSFiddle - React, Tailwind, and code Playground

by Bryan H

HTML

Result:
<div id="result">---</div>
<p>
  Enter some text:

  <input type="date" name="txt" id="datefield" onchange="dateval(value)">
</p>
<button onclick="postdate()">submit</button>

CSS

#result {
  border: 3px blue inset;
  width: 50%;
  margin: 10px auto;
}

p {
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif; 
}

JavaScript

var a;

// Set the *value* of the input element to
// yyyy-mm-dd (text is unchanged)
function dateval(val) {
  var dv = document.getElementById("datefield");
  a = val.split("-").reverse().join("-");
  dv.type = "text";
  dv.value = a;
}

// Extract the yyyy-mm-dd value from the inpuut element
// and put it in the div
function postdate() {
  var dv = document.getElementById("datefield");
  document.getElementById("result").innerHTML = a;
  var z = a.split("-").reverse().join("-");
  dv.type = "date";
  dv.value = z;
}