JSFiddle - React, Tailwind, and code Playground

by skydivematy

HTML

<form>
    Timestamp:
    <input value="1352345234542" id="date" />
    <button>Go</button>
 </form>

Result:
<pre id="res">empty</pre>

CSS

@import url(https://fonts.googleapis.com/css?family=Lato);
body, input, button { font-family:Lato,Arial; }
form { margin-bottom:10px }
input { width:400px }
pre { margin:4px }

JavaScript

// fiddle for http://stackoverflow.com/questions/13903897

function dateDiff(timestamp){
    var d = Math.abs(timestamp - new Date().getTime()) / 1000;                 // delta
    var r = {};                                                                // result
    var s = {                                                                  // structure
        year: 31536000,
        month: 2592000,
        week: 604800, // uncomment row to ignore
        day: 86400,   // feel free to add your own row
        hour: 3600,
        minute: 60,
        second: 1
    };

    Object.keys(s).forEach(function(key){
        r[key] = Math.floor(d / s[key]);
        d -= r[key] * s[key];
    });
    
    return r;
};

$$('form')[0].on('submit', function(e){
    e.stop();
    
	var value = $(this).down('input').getValue();
    console.log('VAL',value);
    var date = new Date(parseInt(value));
    $('res').update(JSON.stringify(dateDiff(date.getTime())));
			
});