KB - Wijmo 5 - Only Dates In Current Month in AngularJS

by Joel Parks

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/interop/angular/wijmo.angular.min.js"></script>
<!-- mark this as an Angular application and give it a controller -->
<div ng-app="app" ng-controller="appCtrl" class="container">
    <wj-calendar 
        min="{{ minDate | date:'yyyy-MM-dd' }}"
        max="{{ maxDate | date:'yyyy-MM-dd' }}"
        value="theDate"
        initialized="init(s,e)">
    </wj-calendar>
</div>

CSS

.wj-calendar {
    max-width: 300px;
}

JavaScript

// define app, include Wijmo 5 directives
var app = angular.module('app', ['wj']);

// controller
app.controller('appCtrl', function ($scope) {

    // the date/time being edited
    $scope.theDate = new Date();
    $scope.minDate = new Date(2020, 1, 1);
    $scope.maxDate = new Date(2020, 1, 29);
    
    $scope.numberOfDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  	$scope.currentYear = 2020;
    
    $scope.getCurrentMonth = function() {
    	return $scope.minDate.getMonth();
    }
    
    $scope.init = function(s,e) {
    	var monthButtons = angular.element(document).find('button');
      monthButtons[0].addEventListener('click', function(e){
      	var previousMonth = s.min.getMonth() - 1;
        if(previousMonth < 0) {
        	$scope.currentYear = $scope.currentYear - 1;
          previousMonth = 11;
        }
        s.min = new Date($scope.currentYear, previousMonth, 1);
        s.max = new Date($scope.currenYear, previousMonth, $scope.numberOfDays[previousMonth]);
        s.displayMonth = s.min;
      }, true);
      
      monthButtons[2].addEventListener('click', function(e) {
      	var nextMonth = s.min.getMonth() + 1;
        if(nextMonth > 11) {
        	$scope.currentYear = $scope.currentYear + 1;
          nextMonth = 0;
        }
        s.min = new Date($scope.currentYear, nextMonth, 1);
        s.max = new Date($scope.currentYear, nextMonth, $scope.numberOfDays[nextMonth]);
        s.displayMonth = s.min;
      }, true);
    }
});