Moment Timezone Proof

by _sir

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.26/moment-timezone-with-data.min.js"></script>
<fieldset>
  <legend>
  Author
  </legend>
  <input id="sourceTime" type="text" value="2020-04-11 13:00"><br>
<select id="sourceZone">
  <option>America/Los_Angeles</option>
  <option>America/New_York</option>
  <option>Australia/Sydney</option>
</select><br>
<button id="createEvent">Create Event Object
</button>
</fieldset>
<fieldset>
<legend>
Data Object
</legend>
<textarea id="data" rows="6" cols="40"></textarea>
</fieldset>
<fieldset>
  <legend>
  Viewer
  </legend>
  <input id="outputTime" readonly type="text"><br>
<button id="showOutput">Show User Date
</button>
</fieldset>

CSS

fieldset { margin: 1em; padding: 1em; line-height: 2em; }

JavaScript

// Global Var
var event = {};

// Core Logic
function getLocalOffsetDifference(toZone) {
  var sourceOffset = moment().utcOffset();
  var targetOffset = moment().tz(toZone).utcOffset();
  return targetOffset - sourceOffset;
}

function getUtcAsZone(toZone, date) {
	return moment(date).subtract(getLocalOffsetDifference(toZone), 'minutes').utc().valueOf();
}

function getDisplayDate(event) {
	return moment(event.start).tz(event.timezone);
}

// Event Handlers

function renderUserDate() {
	document.getElementById('outputTime').value = getDisplayDate(event).format('YYYY-MM-DD HH:mm z');
}

document.getElementById('createEvent').addEventListener('click', () => {
	var sourceZone = document.getElementById('sourceZone').value;
  var sourceTime = document.getElementById('sourceTime').value;
  
	event = {
    inputText: sourceTime, // For validation
  	timezone: sourceZone,
    start: getUtcAsZone(sourceZone, moment(sourceTime)),
  };
  
  document.getElementById('data').innerHTML = JSON.stringify(event, null, 2);
    
	renderUserDate();
});


document.getElementById('showOutput').addEventListener('click', () => {
	renderUserDate();
});