JSFiddle - React, Tailwind, and code Playground

by r3wt

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.0/moment.min.js"></script>
<div class="nav">
  <a class="date-nav" data-options="subtract,1,month">&laquo; month</a>
  <a class="date-nav" data-options="subtract,1,week">&laquo; week</a>
</div>
<div class="current">
</div>
<div class="nav">
  <a class="date-nav" data-options="add,1,week">week &raquo;</a>
  <a class="date-nav" data-options="add,1,month">month &raquo;</a>
</div>

CSS

div{
  box-sizing: border-box
}
.nav{
  width: 25%;
  display: block;
  float: left;
}
.current{
  width: 50%;
  display: block;
  float: left;
}
a{
  color: blue;
}

JavaScript

$(function(){
  //new events code
	(function(){
		
		var x = moment();//this single var manages our state. you no touchy
		function getRange(x)
		{
			var k = function(){ return x.clone(); },
          d = x.day(),
          s = k().subtract(d,'days'),
					e = k().add(6-d,'days');
			return [s,e];
		};
		
		//returns a date range formatted as string
		function getWk(range)
    {
			return range[0].format('LL')+' - '+range[1].format('LL');
		}
		
		/*
    	usage:
			changeWk('subtract',1,'week'),; //subtracts 1 week from x
			changeWk('add',1,'month'); //adds 1 month to x
		*/
		function changeWk(a,b,c)
		{
			x[a](b,c);
		}
		
		function setWk()
		{
			var range = getRange(x),
          result = getWk(range);
			$('.current').html(result);
		}
		
		setWk();//sets the initial week on page load. 
		
		$('.date-nav').on('click',function(e){
			var z = $(this).data('options').split(',');
			changeWk.apply(this,z);//unpack options as args to function
      setWk();
		});
    
    function getAjaxParams()
    {
      
    }
    
	}());
});