angularjs寫日期組件

在main模塊中封裝指令，其他模塊都可以調用

import angular from 'angular';
import $ from 'jquery';

const MODULE_NAME = 'frequencyDirective';

export default angular.module(MODULE_NAME,[])
  .directive('myFrequency', function() {
    return {
        restrict: 'E',
        replace: true,
        template: `<span>
          <span>頻數統計</span>
            <select id="frequencySel" ng-model="freValue" ng-change="change()" ng-init="freValue='2'">
              <option value="2" freValue="2">按月</option>
              <option value="3" freValue="3">按年</option>
            </select>
            <span ng-switch="freValue">
                <div ng-switch-when="2">
                  開始時間
                  <input type="month" ng-model="startMonth" style="width:130px;" ng-change="changeStateTime()"/>
                  結束時間
                  <input type="month" ng-model="endMonth" style="width:130px;" ng-change="changeEndTime()"/>
                </div>
                <div ng-switch-when="3">
                  開始時間
                  <input type="number" ng-model="startYear" style="width:130px;" ng-change="changeStartYear()"/>
                  結束時間
                  <input type="number" ng-model="endYear" style="width:130px;" ng-change="changeEndYear()"/>
                </div>
            </span>
          </span>`,
        scope:{},
        controller:function($scope){
          $scope.startMonth=new Date(new Date().getFullYear()+'-'+new Date().getMonth());
          $scope.endMonth=new Date(new Date().getFullYear()+'-'+new Date().getMonth());
          $scope.change=function(){
            if ($scope.freValue=='2') {
              $scope.startMonth=new Date(new Date().getFullYear()+'-'+new Date().getMonth());
              $scope.endMonth=new Date(new Date().getFullYear()+'-'+new Date().getMonth());
            } else{
              $scope.startYear=new Date().getFullYear()-1;
              $scope.endYear=new Date().getFullYear()-1;
            }
          }
          $scope.changeStateTime=function(){
            if ($scope.$$childHead.startMonth>$scope.startMonth) {
              alert('開始時間不能大於當前時間！');
              $scope.$$childHead.startMonth=new Date(new Date().getFullYear()+'-'+new Date().getMonth());
            };
            $scope.endMonth=$scope.$$childHead.startMonth;
            $scope.$$childHead.endMonth=$scope.$$childHead.startMonth;
          }
          $scope.changeEndTime=function(){
            if ($scope.$$childHead.endMonth<$scope.$$childHead.startMonth) {
              alert('結束時間不能小於開始時間');
              $scope.$$childHead.endMonth=$scope.$$childHead.startMonth;
            };
            if ($scope.$$childHead.endMonth>$scope.startMonth) {
              alert('結束時間不能大於當前時間！');
              $scope.$$childHead.endMonth=new Date(new Date().getFullYear()+'-'+new Date().getMonth());
            };
          }
          $scope.changeStartYear=function(){
            if ($scope.$$childHead.startYear>$scope.startYear) {
              alert('開始時間不能大於當前時間！');
              $scope.$$childHead.startYear=new Date().getFullYear()-1;
            };
            $scope.endYear=$scope.$$childHead.startYear;
            $scope.$$childHead.endYear=$scope.$$childHead.startYear;
          }
          $scope.changeEndYear=function(){
            if ($scope.$$childHead.endYear<$scope.$$childHead.startYear) {
              alert('結束時間不能小於開始時間');
              $scope.$$childHead.endYear=$scope.$$childHead.startYear;
            };
            if ($scope.$$childHead.endYear>$scope.startYear) {
              alert('結束時間不能大於當前時間！');
              $scope.$$childHead.endYear=new Date().getFullYear()-1;
            };
          }
        }
    };
  })
  .name;

在html頁面中調用指令：

<my-frequency></my-frequency>

在main模塊中定義一個service，用於獲取時間：

import angular from 'angular';

const MODULE_NAME = 'service';

export default angular.module(MODULE_NAME, [])
    .factory('service', function($http) {
        return {
            getTime: getTime
        }

        function getTime(f,s) {
            var start;
            var end;
            if (f == 2) {
                let y;
                s.getMonth()+1<10?y='0'+(s.getMonth()+1):y=(s.getMonth()+1);
                start=s.getFullYear()+'-'+y;
                end=s.getFullYear()+'-'+y;
            } else {
                start = s;
                end = s;
            }
            return {
                start: start,
                end: end
            }
        }
    })
    .name;

在頁面的controller中調用service，獲取時間作為發送請求的參數：

var param = {
                frequency:parseInt($scope.$$childHead.freValue),
                startTime: $scope.$$childHead.freValue==2?service.getTime($scope.$$childHead.freValue,$scope.$$childHead.$$childHead.startMonth).start:service.getTime($scope.$$childHead.freValue,$scope.$$childHead.$$childHead.startYear).start,
                endTime: $scope.$$childHead.freValue==2?service.getTime($scope.$$childHead.freValue,$scope.$$childHead.$$childHead.endMonth).end:service.getTime($scope.$$childHead.freValue,$scope.$$childHead.$$childHead.endYear).end
            }