JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<div class="container">
<div class="page-header">
<h1>Date/Time Formatting with JS</h1>
</div>
<p class="lead">To get started, enter a date time in the input box below and click <strong>Convert</strong>.</p>
<div class="row">
<div class="col-xs-8">
<input type="datetime-local" class="form-control" id="datetime"/>
</div>
<div class="col-xs-4">
<input type="submit" class="btn btn-primary" value="Convert"/>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-2"><label>Output</label></div>
<div class="col-xs-10"><pre id="output"></pre></div>
</div>
</div>
JavaScript
function toDateTime(date) {
var str = '';
var year, month, day, hour, min;
year = date.getUTCFullYear();
month = date.getUTCMonth() + 1;
month = month < 10 ? '0' + month : month;
day = date.getUTCDate();
day = day < 10 ? '0' + day : day;
hour = date.getUTCHours();
hour = hour < 10 ? '0' + hour : hour;
min = date.getUTCMinutes();
min = min < 10 ? '0' + min : min;
str += year + '-' + month + '-' + day;
str += ' ' + hour + ':' + min;
return str;
}
$('[type=submit]').click(function(e) {
var $input = $('#datetime');
var value = $input.val();
var date = new Date(value);
var ts = toDateTime(date);
$('#output').html(ts);
});