JSFiddle - React, Tailwind, and code Playground

by mooyah

HTML

<input id="date" type="text" value="2012-01-01 00:00"/>
<input id="tz" type="text" value="+0000"/>
<input id="tz2" type="text" value="-0700"/>
<div id="startdate">
</div>
<div id="startdate-tz">
</div>
<div id="startdate-back">
</div>
<div id="startdate-tz2">
</div>

JavaScript

var eStartDate = document.id("startdate");
var eStartDateTZ = document.id("startdate-tz");
var eStartDateBack = document.id("startdate-back");
var eStartDateTZ2 = document.id("startdate-tz2");
var eDate = document.id("date");
var eTZ = document.id("tz");
var eTZ2 = document.id("tz2");
$$("input").addEvent(
    "change", 
    setDate
);

setDate();

function setDate(oEvent) 
{
    var dStartDate = Date.parse(eDate.get("value")),
        dStartDateTZ = Date.parse(dStartDate.format("%Y-%m-%d %H:%M") + " " + eTZ.get("value")),
        dStartDateBack = Date.parse(dStartDateTZ.format("%Y-%m-%d %H:%M") + " -1400"),
        dStartDateTZ2 = Date.parse(
            /*dStartDateBack.format("%Y-%m-%d %H:%M") + ":00 "*/eDate.get("value") 
            + eTZ2.get("value")
        );
    eStartDate.set("text", dStartDate);
    eStartDateTZ.set("text", dStartDateTZ);
    eStartDateBack.set("text", dStartDateBack);
    eStartDateTZ2.set("text", dStartDateTZ2);
}