JSFiddle - React, Tailwind, and code Playground

by Keith Fimreite

HTML

<html ng-app="datepicker">
    <head>
    	<title>Date time picker</title>
            <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
            <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    	<script src="thejs.js"></script>
    	<style type="text/css">
    		.frame {
    			width: 100%;
    			height: 400px; /* adjust this according to the main questions box height */
    			margin-left: 0%;
    			border: 1px solid #777777; 
    			overflow: auto;
    		}

    		.datepicker {
    			width: 100%;
    			list-style: none;
    			padding: 0px;
    			margin: 0px;
    		}

    		.datepicker li {
    			border-bottom: 1px solid #ededed;
    			padding: 10px;
    		}

    		.text-center {
    			text-align: center;
    		}

    		.border {
    			border: 1px solid red;
    		}



    	</style>
    </head>
    <body ng-controller="dateTimePicker">
    <div class="container col-md-3">
        <div class="col-md-12" style="background-color:ff6600;">
            <input  type="image"  src="http://s15.postimg.org/utzsj55ev/icon_ios7_arrow_right_128.png" style="float:right;" ng-click="changeMonth(1);"/>
            <input  type="image" src="http://s7.postimg.org/mwp7xtpg7/icon_ios7_arrow_left_128.png" ng-click="changeMonth(-1);"/>
            <h3  style="text-align:center;"> {{monthName}} </h3> 
        </div>
        <div class="frame col-md-12">
            <ul class="datepicker text-center" ng-if="true">
    	    <li ng-repeat="date in dateValues">{{date | date:'EEE dd'}}</li> <!-- ng-repeat on this one to show all available dates -->
    		
    	</ul>
        </div>
    </div>

    </body>
    </html>

JavaScript

datepicker = angular.module('datepicker', []);

datepicker.controller('dateTimePicker', ['$scope', function($scope){
	console.log('alive');
        
  var date = new Date();
  var months = [],
    monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
      "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
    ];
  for (var i = 0; i <= 12; i++) {
    months.push(monthNames[date.getMonth()] + ' ' + date.getFullYear());
    date.setMonth(date.getMonth() + 1);
  }
  $scope.year =2015;

  $scope.changeMonth = function(steps) {
    if ($scope.monthIndex + steps >= 0 &&
      $scope.monthIndex + steps <= 12
    ) {
      $scope.dateValues = [];
      $scope.monthIndex = $scope.monthIndex + steps;
      $scope.monthName = $scope.months[$scope.monthIndex];
       var date = new Date();
        console.log(date.getMonth());
        var offset = date.getMonth()
       console.log($scope.monthIndex);
        var offsetDate = offset + $scope.monthIndex;
      $scope.nDays = new Date( $scope.year,  offsetDate+1, 0).getDate();
        console.log(offsetDate+1);
        console.log(new Date( $scope.year, offsetDate, 1));
      for (i = 1; i <= $scope.nDays; i++) {  
    	var d = new Date();
    	$scope.dateValues.push(new Date($scope.year,  offsetDate, i));
  	  }
      
    }else{console.log("missed")}
  };

  $scope.monthIndex = 0;
  $scope.months = months;
  $scope.monthName = months[0];
  $scope.changeMonth(0);

}]);