JSFiddle - React, Tailwind, and code Playground

by Marvin De la Cruz

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.0/moment.js"></script>
<label for="in">
  <input id="dateIn" type="datetime-local" />
</label>
<button id="btn" onclick="btnLocalClick();">Local</button>
<button id="btn" onclick="btnUtcClick();">UTC</button>
<ul id="show">
</ul>

CSS

#btn{
  font-weight: bold;
  padding: 1em 2em;
}

JavaScript

// messaging
function show(msg){
	var parent = document.getElementById("show")
  var child = document.createElement("li");
  var text = document.createTextNode(msg);
  
  if (!parent){
  	console.log("Not Found");
  } else {
  	console.log("Found");
    child.appendChild(text);
    parent.appendChild(child);
  }
}
// get datetime as string without timezone
function getDateText(){
	var dateIn = document.getElementById("dateIn");
	var res = "";
  if (dateIn){
  	console.log("date: ", dateIn.value);
		res = dateIn.value;
  }
  return res;
}
// return Moment from now to the date
function getMoment(v, isUtc){
	var vd;
	if (isUtc){
  	console.log("UTC", v);
  	vd = moment.utc(v);
  } else {
  	console.log("Local", v);
  	vd = moment(v);
  }
  var result = "?";
  if (vd.isValid()){
  	console.log("Since: ", vd);
  	result = vd.fromNow();
  }
  return result;
}
// use the date as Local
function btnLocalClick(){
	var msg = getMoment(getDateText(), false);
  show("Local: " + msg);
}
// use the date as UTC
function btnUtcClick(){
	var msg = getMoment(getDateText(), true);
  show("UTC: " + msg);
}

// main
function main(){
  show("Hello!");
  var now = moment();
  var nowString = "";
  nowString = now.format("YYYY-MM-DD[T]HH:mm:ss.SSS");
  nowString = nowString.substring(0, nowString.length-1);
  document.getElementById("dateIn").value = nowString;
  btnUtcClick();
}
main();