JSFiddle - React, Tailwind, and code Playground

by phsiao2000

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.backbone.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twix.js/0.3.0/twix.js"></script>
<div id='log'></div>

JavaScript

function log(d) {
    $("#log").append(d +'<br>');
}
var dates=['2014/04/11','2014/04/13','2014/10/04','2014/02/03 9:00 PM','2014/02/06 9:00 PM','2014/02/07','2014/02/16','2014/02/08','2014/04/21','2014/04/13','2014/10/14','2014/02/05 3:00 PM','2014/02/06','2014/02/03','2014/06/06','2014/02/08'];
dates.sort();
function groupByDate(arr, grouping){
    var dateGroups = {}, groupAge=[];
    var group = '';
    grouping = grouping || function(v){return moment(v).fromNow();}
    arr.forEach(function(v,i){
        group = grouping(v);
        if(!dateGroups[group]){
            groupAge.push(group);
            dateGroups[group] = [];
        }
        dateGroups[group].push(moment(v));
    });
    var g = [];
    groupAge.forEach(function(v) {
        g.push({group: v, dates: dateGroups[v]}); 
    });
    console.log(g);
    return g;
}
function showByGroups(dates, grouping) {
    var dg = groupByDate(dates, grouping);
    console.log(dg);
    dg.forEach(function(v,i) {
        log(v.group);
        v.dates.forEach(function(v,i){
            log('............' + v.calendar());
        })
    });   
}
showByGroups(dates); 
log('===========================');
showByGroups(dates,function(v){return moment().twix(moment(v),true).humanizeLength();}); 
log('===========================');
showByGroups(dates,function(v){return moment().twix(moment(v),false).humanizeLength();});