JSFiddle - React, Tailwind, and code Playground

by guidosch

HTML

<script src="http://momentjs.com/downloads/moment.min.js"></script>
<script src="http://momentjs.com/downloads/moment-timezone-with-data-2010-2020.min.js"></script>
<body>
     <h1>Comments</h1>

    <div class="comment">
        <p class="comment-header">
            Justin Time on
            <span class="datetime" data="2014-12-01T17:30:00Z">
                Dec 12 5:30pm
            </span>
        </p>
        <p class="comment-body">
            Hey, where were you last night??
        </p>
    </div>
    <div class="comment">
        <p class="comment-header">
            Don B. Lait on
            <span class="datetime" data="2014-12-01T17:32:00Z">
                Dec 12 5:32pm
            </span>
        </p>

        <p class="comment-body">
            I was just runnin' a little late, man. Where were you? I got there and you weren't there, man.
        </p>
     </div>
    
    <div class="comment">
        <p class="comment-header">
            Justin Time on 
            <span class="datetime" data="2014-12-01T17:35:00Z">
                Dec 12 5:35pm
            </span>
        </p>
        <p class="comment-body">
            Dude! I waited, like, 12 minutes!
        </p>
    </div>

CSS

.comment {
    margin: 10px;
    padding: 10px;
    border: solid #baddee 1px;
}
.comment-header {
    font-size: 75%;
    color: #99cafe;
}

JavaScript

var User = function (settings) {
    this.name = settings.name;
    this.timezone = settings.timezone;
    this.dateFormat = settings.dateFormat;

    // more initialization
    // ...
};

// returns a date object for further manipulation  
User.prototype.getLocalDateTime = function (utcDateTime) {
    return moment(utcDateTime).tz(this.timezone);
};

// returns a date string formatted to the user's preferences
User.prototype.getPreferredDateFormat = function (utcDateTime) {
    return this.getLocalDateTime(utcDateTime).format(this.dateFormat);
};


// Usage
// get the user from the server
var serverResponse = {
    name: 'Justin Time',
    timezone: 'America/New_York',
    dateFormat: 'MMM Do h:ma z'
};

// create user instance from server data
var currentUser = new User(serverResponse);

// re-format dates in comments
var elements = document.getElementsByClassName('datetime');

for (var i = 0; i < elements.length; i = i + 1) {
    var element = elements[i];
    var utc = element.getAttribute('data');

    element.textContent = currentUser.getPreferredDateFormat(utc);
}