zoukankan      html  css  js  c++  java
  • 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="130px;" ng-change="changeStateTime()"/>
                      结束时间
                      <input type="month" ng-model="endMonth" style="130px;" ng-change="changeEndTime()"/>
                    </div>
                    <div ng-switch-when="3">
                      开始时间
                      <input type="number" ng-model="startYear" style="130px;" ng-change="changeStartYear()"/>
                      结束时间
                      <input type="number" ng-model="endYear" style="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
                }
  • 相关阅读:
    AtCoder Beginner Contest 205
    Codeforces Round #725 (Div. 3)
    Educational Codeforces Round 110 (Rated for Div. 2)【A
    Codeforces Round #722 (Div. 2)
    AtCoder Beginner Contest 203(Sponsored by Panasonic)
    AISing Programming Contest 2021(AtCoder Beginner Contest 202)
    PTA 520 钻石争霸赛 2021
    Educational Codeforces Round 109 (Rated for Div. 2)【ABCD】
    AtCoder Beginner Contest 200 E
    Educational Codeforces Round 108 (Rated for Div. 2)【ABCD】
  • 原文地址:https://www.cnblogs.com/iagw/p/6814334.html
Copyright © 2011-2022 走看看