JSFiddle - React, Tailwind, and code Playground

angular months, highlighted this month, click to trigger search

by Andrew Pougher

HTML

<div ng-app="test">
  <div ng-controller="Ctrl">
    <li ng-repeat="currMonth in months" ng-class="{'selected': currMonth.indexOf('Feb') != -1}" ng-click="showInfo(currMonth)">{{currMonth}}</li>
    {{dt | date:"MMMM"}}
    
    <h2>
    {{dateData}}
    </h2>
  </div>
</div>

CSS

.selected{background:#efef44}

JavaScript

angular.module('test', []).controller('Ctrl', function($scope) {
    var date = new Date();
   
    $scope.dt = date;

    var months = [],
        monthNames = [ "January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December" ];
    for(var i = 0; i < 12; i++) {
        months.push(monthNames[date.getMonth()] + ' ' + date.getFullYear());
        
        // Historic for a year 
        //date.setMonth(date.getMonth() - 1);
         // Forward for a year 
        date.setMonth(date.getMonth() + 1);
    }
    $scope.months = months;
    
    $scope.showInfo = function(m){
    $scope.dateData = (m)
    } 
});