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 }