利用ngrepeat實現的日曆加上ion-slide-box效果

開發招聘助手的有個頁面須要畫日曆，由於開發比較急，想換個方式去實現功能的，可是想一想本身原本就打算寫個日曆，此次未必不是個很好的機會啊~因此也就花了一天整了個日曆
先看效果：

默認打開是定位到當月當天，本日以前的天數灰色字體標識

點擊按鈕切換月份

左右滑動切換當月的周

說一下主要的實現原理吧：
在作以前參考了不少的代碼，可是不知道爲何，內心面總以爲這樣去實現太麻煩了，並且可能因爲資歷不夠，看別人的代碼也比較難懂。。。
因此就本身想了下：
這裏主要是經過二維數組ng-repeat實現的，給出

$scope.days = [
  [
    {"date": "", "check": false, "year": "", "month": ""}, {"date": "", "check": false, "year": "", "month": ""},
    {"date": "", "check": false, "year": "", "month": ""}, {"date": "", "check": false, "year": "", "month": ""},
    {"date": "", "check": false, "year": "", "month": ""}, {"date": "", "check": false, "year": "", "month": ""},
    {"date": "", "check": false, "year": "", "month": ""}
  ],
  [
    {"date": "", "check": false, "year": "", "month": ""}, {"date": "", "check": false, "year": "", "month": ""},
    {"date": "", "check": false, "year": "", "month": ""}, {"date": "", "check": false, "year": "", "month": ""},
    {"date": "", "check": false, "year": "", "month": ""}, {"date": "", "check": false, "year": "", "month": ""},
    {"date": "", "check": false, "year": "", "month": ""}
  ],
  [
    {"date": "", "check": false, "year": "", "month": ""}, {"date": "", "check": false, "year": "", "month": ""},
    {"date": "", "check": false, "year": "", "month": ""}, {"date": "", "check": false, "year": "", "month": ""},
    {"date": "", "check": false, "year": "", "month": ""}, {"date": "", "check": false, "year": "", "month": ""},
    {"date": "", "check": false, "year": "", "month": ""}
  ],
  [
    {"date": "", "check": false, "year": "", "month": ""}, {"date": "", "check": false, "year": "", "month": ""},
    {"date": "", "check": false, "year": "", "month": ""}, {"date": "", "check": false, "year": "", "month": ""},
    {"date": "", "check": false, "year": "", "month": ""}, {"date": "", "check": false, "year": "", "month": ""},
    {"date": "", "check": false, "year": "", "month": ""}
  ],
  [
    {"date": "", "check": false, "year": "", "month": ""}, {"date": "", "check": false, "year": "", "month": ""},
    {"date": "", "check": false, "year": "", "month": ""}, {"date": "", "check": false, "year": "", "month": ""},
    {"date": "", "check": false, "year": "", "month": ""}, {"date": "", "check": false, "year": "", "month": ""},
    {"date": "", "check": false, "year": "", "month": ""}
  ],
  [
    {"date": "", "check": false, "year": "", "month": ""}, {"date": "", "check": false, "year": "", "month": ""},
    {"date": "", "check": false, "year": "", "month": ""}, {"date": "", "check": false, "year": "", "month": ""},
    {"date": "", "check": false, "year": "", "month": ""}, {"date": "", "check": false, "year": "", "month": ""},
    {"date": "", "check": false, "year": "", "month": ""}
  ]
];

前端代碼：

<ion-slide>
  <table>
    <tbody>
    <tr>
      <th>日</th>
      <th>一</th>
      <th>二</th>
      <th>三</th>
      <th>四</th>
      <th>五</th>
      <th>六</th>
    </tr>
    <tr ng-repeat="weeek in [4,5]" ng-init="index = $index+4">
      <td ng-repeat="day in days[index] track by $index" ng-click="choiceToday(day)">
        <div ng-class="{true:'yimianshi'}[day.date == currentDate]"></div>
        <div ng-class="{true:'checked'}[day.check]">
          <span ng-class="{true:'spanColor'}[day.smallToday]">{{day.date}}</span>
        </div>
      </td>
    </tr>
    </tbody>
  </table>
</ion-slide>

本想用三維數組，覺得這個ion-slide是顧哥的建議，以前都已完成60%，因此就沒有作太多的修改
還有給$scope.days賦值的的一個對象數組：

var valueArr = new Array();//用於給$scope.days賦值的數組

下面將以功能化去展示代碼：
首先日曆的初始化：

//初始化日期操做
    function initDate() {
      myDate = new Date();
      $scope.year = myDate.getFullYear();
      $scope.month = myDate.getMonth() + 1;      $scope.date = myDate.getDate();
      $scope.currentDate = $scope.date;
      $scope.currentMonth = $scope.month;
      $scope.headerMonth = $scope.month;
      $scope.currentEnMonth = monthShort($scope.month);
      $scope.currentYear = $scope.year;
      day = myDate.getDay();
      num = day - ($scope.date % 7 - 1); 
      if (ROOTCONFIG) {
        console.log("myDate = " + myDate);
        console.log($scope.year + "年" + $scope.month + "月" + $scope.date + "日 星期" + day);
        console.log("本月第一天星期" + num);
      }
    }

判斷每個月多少天：
這個比較簡單

function thisMonthDays(month, year) {
  var end = 0;
  switch (month) {
    case 1:
      end = 31;
      break;
    case 2:
      if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0))end = 29; else end = 28;
      break;
    case 3:
      end = 31;
      break;
    case 4:
      end = 30;
      break;
    case 5:
      end = 31;
      break;
    case 6:
      end = 30;
      break;
    case 7:
      end = 31;
      break;
    case 8:
      end = 31;
      break;
    case 9:
      end = 30;
      break;
    case 10:
      end = 31;
      break;
    case 11:
      end = 30;
      break;
    case 12:
      end = 31;
      break;
  }
  return end;
}

爲數組賦值：

function initValueArr(year, month, num, valueArr) {
  $scope.enMonth = monthShort(month);
  var newDay = 1;//每個月第一天
  //var newMonthDay = 1;
  var templateMonth = $scope.month - 1;
  var templateYear = $scope.year;
  if (templateMonth == 0) {
    templateMonth = 12;
    templateYear = $scope.year - 1;
  }
  var preMon = thisMonthDays(templateMonth, year);//上一個月天數
  var currentMon = thisMonthDays(month, year);//本月天數
  //num以前的賦值
  for (var i = num - 1; i >= 0; i--) {
    var obj = {};
    //obj.date = preMon-i;
    //console.log(obj.date);
    //obj.month = templateMonth;
    //obj.year = templateYear;
    obj.data = "";
    obj.month = "";
    obj.year = "";
    valueArr.push(obj);
  }
  //num之後的賦值操做
  for (var i = num; i < 42; i++) {
    var obj = {};
    obj.date = newDay++;
    obj.month = $scope.month;
    obj.year = $scope.year;

    //若是大於半月的天數之後將從1開始算起
    if (obj.date > currentMon) {
      //newDay = 1;
      //obj.date = newDay++;
      //$scope.month += 1;
      //if ($scope.month > 12) {
      //  $scope.month = 1;
      //  obj.month = $scope.month;
      //  $scope.year += 1;
      //  obj.year = $scope.year;
      //}
      obj.date = "";
      obj.month = "";
      obj.year = "";
    }
    valueArr.push(obj);
  }
  console.log(angular.toJson(valueArr));
}

註釋的部分是由於最終決定在當前月份中不顯示前一個月和後一個月的日期，因爲日期的顏色只區分今天的以前和之後，因此這裏顯示出以前的會比較亂。
對象數組給二維對象數組賦值的函數

function setDaysValue(arr) {
  for (var i = 0; i < 6; i++) {
    for (var j = 0; j < 7; j++) {
      $scope.days[i][j].date = arr[0].date;
      $scope.days[i][j].year = arr[0].year;
      $scope.days[i][j].month = arr[0].month;
      if ($scope.days[i][j].date == $scope.currentDate) {
        if ($scope.days[i][j].month == $scope.currentMonth) {
          if ($scope.days[i][j].year == $scope.currentYear) {
            console.log($scope.currentYear);
            console.log($scope.currentMonth);
            console.log($scope.currentDate);
            console.log("yanglei" + angular.toJson($scope.days[i][j]));
            $scope.days[i][j].check = true;
            if (i > 1 && i < 4) {
              $scope.myIndex = 1;
            } else {
              $scope.myIndex = 2;
            }
          }
        }
      }
      if ($scope.days[i][j].year > $scope.currentYear) {
        $scope.days[i][j].smallToday = false;
      } else {
        if ($scope.days[i][j].month > $scope.currentMonth) {
          $scope.days[i][j].smallToday = false;
        } else if ($scope.days[i][j].month < $scope.currentMonth) {
          $scope.days[i][j].smallToday = true;
        } else {
          if ($scope.days[i][j].date >= $scope.currentDate) {
            $scope.days[i][j].smallToday = false;
          } else {
            $scope.days[i][j].smallToday = true;
          }
        }
      }
      arr.shift();
    }
  }
}

點擊跳轉下一個月和上一個月的操做
其實我以爲這裏是能夠抽離封裝出來的，不至於代碼的這麼大重複性
後續再作優化

$scope.nextMon = function () {
      //var myDate = new Date();
      var nian = myDate.getFullYear();
      var yue = myDate.getMonth();
      yue += 2;
      if (yue == 13) {
        nian++;
        yue = 1;
      }
      var ri = "1";
      var str = nian + " " + yue + " " + ri;
      myDate = new Date(str);
      $scope.year = myDate.getFullYear();
      $scope.month = myDate.getMonth() + 1;
      $scope.date = myDate.getDate();
      $scope.headerMonth = $scope.month;
      day = myDate.getDay();
      num = day - ($scope.date % 7 - 1);
      initValueArr($scope.year, $scope.month, num, valueArr);
      for (var i = 0; i < 6; i++) {
        for (var j = 0; j < 7; j++) {
          $scope.days[i][j].check = false;
        }
      }
      setDaysValue(valueArr);
      //if($scope.month != $scope.currentMonth){
      //  $scope.myIndex = 0;
      //}
      $ionicSlideBoxDelegate.slide(0);
      if (ROOTCONFIG) {
        console.log("myDate = " + myDate);
        console.log($scope.year + "年" + $scope.month + "月" + $scope.date + "日 星期" + day);
        console.log("本月第一天星期" + num);
      }
    };
//上一個月
    $scope.preMon = function () {
      var nian = myDate.getFullYear();
      var yue = myDate.getMonth();
      if (yue == 0) {
        nian--;
        yue = 12;
      }
      var ri = "01";
      var str = nian + " " + yue + " " + ri;
      myDate = new Date(str);
      $scope.year = myDate.getFullYear();
      $scope.month = myDate.getMonth() + 1;
      $scope.date = myDate.getDate();//獲取日期
      $scope.headerMonth = $scope.month;
      day = myDate.getDay();
      num = day - ($scope.date % 7 - 1);
      initValueArr($scope.year, $scope.month, num, valueArr);
      for (var i = 0; i < 6; i++) {
        for (var j = 0; j < 7; j++) {
          $scope.days[i][j].check = false;
        }
      }
      setDaysValue(valueArr);
      //if($scope.month != $scope.currentMonth){
      //  $scope.myIndex = 0;
      //}
      $ionicSlideBoxDelegate.slide(0);
      if (ROOTCONFIG) {
        console.log("myDate = " + myDate);
        console.log($scope.year + "年" + $scope.month + "月" + $scope.date + "日 星期" + day);
        console.log("本月第一天星期" + num);
      }
    };

對了，這其中還有個月份的轉化下（貌似並無什麼好說的哦）：

//月份的英語縮寫
    function monthShort(month) {
      var enMonth = "";
      switch (month) {
        case 1:
          enMonth = "Jan";
          break;
        case 2:
          enMonth = "Feb";
          break;
        case 3:
          enMonth = "Mar";
          break;
        case 4:
          enMonth = "Apr";
          break;
        case 5:
          enMonth = "May";
          break;
        case 6:
          enMonth = "Jun";
          break;
        case 7:
          enMonth = "Jul";
          break;
        case 8:
          enMonth = "Aug";
          break;
        case 9:
          enMonth = "Sep";
          break;
        case 10:
          enMonth = "Oct";
          break;
        case 11:
          enMonth = "Nov";
          break;
        case 12:
          enMonth = "Dec";
          break;
      }
      return enMonth;
    }

其中還有各類函數的調用

initDate();
initValueArr($scope.year, $scope.month, num, valueArr);
setDaysValue(valueArr);

就這樣，一個簡單的日曆就出來了
感受不少東西仍是要本身去嘗試，看別人的代碼怎麼怎麼的，其實也不是一鼓作氣的。
慢慢來~