Moment.js manipulations

by ken tsai

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.4.0/moment.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div id="toolbar">
  <button class="period" id="pmonth">Previous month</button>
  <button class="period" id="pweek">Previous week</button>
  <button class="period" id="prev">Prev period</button>
  <button class="period" id="next">Next period</button>
  <button class="period" id="nweek">Next week</button>
  <button class="period" id="nmonth">Next month</button>
  <button class="period" id="today">Today</button>
  <button class="period" id="thisWeek">This Week</button>
  <button class="period" id="monthToDate">This month</button><br/>
</div>
<table id="dateTable">
    <thead>
        <tr>
            <th></th>
            <th style="text-align:left">Times</th>
            <th style="text-align:right">When</th>
            <th id="pHead" title="Please note that this is rounded up to the nearest day">Period</th>
        </tr>
    </thead>
    <tr>
        <th>Start:</th>
        <td id="start">2013/11/24 00:00</td>
        <td class="from" id="fromStart"></td>
        <td id="period" rowspan="2" title="Please note that this is rounded up to the nearest day"></td>
    </tr>
    <tr>
        <th>End:</th>
        <td id="end">2013/11/24 00:00</td>
        <td class="from" id="fromEnd"></td>
    </tr>
</table>

CSS

.from {
    text-align:right
}
.period { font-size:smaller; width:135px; }
#period{text-align:center; width:50%}
#dateTable { width: 700px}
/* td { border:1px solid black} */
#toolbar {
    padding: 4px;
    display: inline-block;
  }
  /* support: IE7 */
  *+html #toolbar {
    display: inline;
  }
#pHead, #period { display:none }

JavaScript

var now, currentPeriod;

function getWeekNumber(ts) {
    var d = new Date(ts);
    d.setHours(0, 0, 0);
    d.setDate(d.getDate() + 4 - (d.getDay() || 7));
    var yearStart = new Date(d.getFullYear(), 0, 1);
    return Math.ceil((((d - yearStart) / 86400000) + 1) / 7);
}

function pad(str) {
    return ("0" + str).slice(-2);
}

function formatDate(ts) {
    var td = new Date(parseInt(ts));
    return td.getFullYear() + "/" + 
        pad(td.getMonth() + 1) + "/" + 
        pad(td.getDate()) + " " + 
        pad(td.getHours()) + ":" + 
        pad(td.getMinutes());
}

function formatWDate(ts) {
    return getWeekNumber(ts) + "&nbsp;(" + formatDate(ts) + ")";
}

function showText() {
    var now = moment();
    var fromNow = moment($("#start").text()+":00");
    fromNow.hours(now.hours()).minutes(now.minutes()).seconds(now.seconds())
    var isNow = now.diff(fromNow) < 60000;    
    var fromStartText = isNow? "midnight today" : fromNow.fromNow();    
    $("#fromStart").html(fromStartText);
    var fromEnd = moment($("#end").text() + ":00");
    isNow = now.diff(fromEnd) < 60000;
    var fromEndText = isNow? "now" : fromEnd.fromNow();
    $("#fromEnd").html(fromEndText);
    $("#period").html(fromNow.fromNow(true));
    $("#next, #nweek, #nmonth").button((isNow)?"disable":"enable");    
    if (isNow) {  
             if (currentPeriod=="week")  $("#thisWeek"   ).focus();    
        else if (currentPeriod=="month") $("#monthToDate").focus();    
        else if (currentPeriod=="day")   $("#today"      ).focus();    
    }        
}

function thisMonth() {
  $("#start").html(formatDate(moment().startOf("month").valueOf()));
  $("#end").html(formatDate(Date.now()));
}
function thisWeek() {
    var now = moment(new Date());
    var mon = moment(new Date());
    mon.isoWeekday(1).startOf("day"); // destructive!
    $("#start").html(formatDate(mon.valueOf()));
    $("#end").html(formatDate(now.valueOf()));
}
function today() {
 ...