Ionic日历

献上图片:

附上代码:

.controller('calenderCtrl', function ($scope, CalenderService) {
    //星期初始化
    var week = ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"];


    //选中日期初始化
    var _date = new Date();
    var weekind = (_date.getDay() == 0) ? 6 : _date.getDay() - 1;
    $scope.checkedDate = {
      year: _date.getFullYear(),
      month: _date.getMonth() + 1,
      day: _date.getDate(),
      week: week[weekind]
    };
    $scope.checkedday = _date.getDate();


    //日历初始化
    var initCalendar = function () {
      $scope.calendar = CalenderService.initCalendar($scope.checkedDate.year, $scope.checkedDate.month, $scope.checkedDate.day);
    };
    initCalendar($scope.checkedDate);


    //选择月份
    $scope.selectMonth = function (num) {
      if (($scope.checkedDate.month + num) == 0) {
        $scope.checkedDate.year--;
        $scope.checkedDate.month = 12;
      } else if (($scope.checkedDate.month + num) == 13) {
        $scope.checkedDate.year++;
        $scope.checkedDate.month = 1;
      } else {
        $scope.checkedDate.month += num;
      }
      initCalendar($scope.checkedDate);
    };


    //选择日期
    $scope.checkDay = function (cal) {
      var nowmonth = angular.copy($scope.checkedDate.month);
      var nowyear = angular.copy($scope.checkedDate.year);
      var tempcal = angular.copy(cal);
      $scope.checkedDate = angular.copy(cal);
      var newdate = new Date(tempcal.year, tempcal.month - 1, tempcal.day);
      var weekindex = (newdate.getDay() == 0) ? 6 : newdate.getDay() - 1;
      $scope.checkedday = tempcal.day;
      $scope.checkedDate.week = week[weekindex];
      if(tempcal.year!=nowyear || tempcal.month!=nowmonth){
        initCalendar($scope.checkedDate);
      }
    };
  });


.factory('CalenderService', function () {
    var _monthday = [];//存放日历
    var _months = [];//年份下各月天数
    var monthnum;//当月天数
    var lastMonth; //上一月天数
    var nextMounth;//下一月天数
    return {
      //初始化某年每月多少天
      initMonths: function (_year) {
        for (var i = 1; i <= 12; i++) {
          var date = new Date(_year, i, 1);
          _months.push((new Date(date.getTime() - 1000 * 60 * 60 * 24)).getDate());
        }
      },
      //初始化当月,上月,下月天数
      initLastAndNextMonth: function (_year, _month) {
        monthnum = new Date(parseInt(_year), parseInt(_month), 0).getDate();
        if (parseInt(_month) == 1) {
          lastMonth = new Date(parseInt(_year) - 1, parseInt(12), 0).getDate();
        } else {
          lastMonth = new Date(parseInt(_year), parseInt(_month) - 1, 0).getDate();
        }
        if (parseInt(_month) == 12) {
          nextMounth = new Date(parseInt(_year) + 1, parseInt(1), 0).getDate();
        } else {
          nextMounth = new Date(parseInt(_year), parseInt(_month) + 1, 0).getDate();
        }
      },
      //初始化日历
      initCalendar: function (_year, _month, _day) {
        this.initData();
        this.initMonths(_year);
        this.initLastAndNextMonth(_year, _month);
        var cal = {
          year: _year,
          month: _month,
          day: 0
        };
        //本月第一天是周几
        var firstweek = this.getMonthFirstDayWeek(_year, _month, 1);
        firstweek = firstweek == 0 ? 7 : firstweek;
        //上月空余日期填补
        for (j = firstweek - 1; j > 0; j--) {
          var temp1 = angular.copy(cal);
          temp1.month = _month - 1 == 0 ? 12 : _month - 1;
          temp1.year = _month - 1 == 0 ? _year - 1 : _year;
          temp1.day = lastMonth - j + 1;
          _monthday.push(temp1);
        }
        //本月日期填补
        for (i = 1; i <= _months[_month - 1]; i++) {
          var weeknum = this.getMonthWeek(_year, _month, i);
          var temp2 = angular.copy(cal);
          temp2.day = i;
          _monthday.push(temp2);
        }
        //本月最后一天是周几
        var lastweek = this.getMonthFirstDayWeek(_year, _month, monthnum);
        //下月空余日期填补
        if (lastweek != 0) {
          for (j = 1; j <= 7 - lastweek; j++) {
            var temp3 = angular.copy(cal);
            temp3.month = _month + 1 == 13 ? 1 : _month + 1;
            temp3.year = _month + 1 == 13 ? _year + 1 : _year;
            temp3.day = j;
            _monthday.push(temp3);
          }
        }
        return _monthday;
      },
      //判断某一天是周几
      getMonthFirstDayWeek: function (year, month, day) {
        var date = new Date(year, month - 1, day);
        return date.getDay();
      },
      //判断某一天是当月的第几周
      getMonthWeek: function (year, month, day) {
        var date = new Date(year, parseInt(month) - 1, day);
        var w = date.getDay();
        w = w == 0 ? 7 : w;
        var d = date.getDate();
        return Math.ceil(
          (d + 6 - w) / 7
        );
      },
      //重置所有数据
      initData: function () {
        _monthday = [];
        _months = [];
        monthnum = 0;
        lastMonth = 0;
        nextMounth = 0;
      }
    }
  });

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值