JSFiddle - React, Tailwind, and code Playground

by csornmo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.4.1/moment-timezone-with-data.min.js"></script>
<p>Server time: <span id="servertime">Loading...</span></p>
<p>Device time: <span id="devicetime">Loading...</span></p>
<p>Time offset: <span id="offsettime">Loading...</span> ms</p>
<hr/>
<p>Sweden time :: <span id="swedentime">Loading...</span></p>

JavaScript

/*
	External dependencies:
		* http://momentjs.com/
		* http://momentjs.com/timezone/
*/

(function() {
  // Set the locale to use for time formatting. Try other
  // options like 'sv' or 'fi' or 'fr'. 'en' == english
  moment.locale('sv');

  var deviceTime,
      serverTime,
      actualTime,
      timeOffset;

  // Run each second lap to show times in real time
  var updateDisplay = function() {
    // Show static time data
    document.getElementById('servertime').innerHTML = 
      serverTime.format();
    document.getElementById('devicetime').innerHTML = 
      deviceTime.format();
    document.getElementById('offsettime').innerHTML = 
      timeOffset;

    // Show dynamic time data
    var displayFormat = 'LL LTS';
    document.getElementById('swedentime').innerHTML = 
      actualTime.tz('Europe/Stockholm').format(displayFormat);
      
      

    if ( moment('2010-10-20').isAfter('2009-12-31', 'year') ) {
      console.log('Yes');
    } else {
      console.log('No');
    }
  };

  var timerHandler = function() {
    // Get current time on the device
    actualTime = moment();

    // Add the calculated offset
    actualTime.add(timeOffset);

    // Show our new results
    updateDisplay();

    // Re-run this next second wrap
    setTimeout(timerHandler, (1000 - (new Date().getTime() % 1000)));
  };

  // Fetch the servern time through a HEAD request to current URL
  // using asynchronous request.
  var fetchServerTime = function() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onload = function() {
      var dateHeader = xmlhttp.getResponseHeader('Date');

      // Just store the current time on device for display purpose
      deviceTime = moment();

      // Turn the "Date:" header field into a "moment" object,
      // use JavaScript Date() object as parser
      serverTime = moment(new Date(dateHeader)); // Read

      // Store the differences between device time and server time
      timeOffset = serverTime.diff(moment());

      // Now...