Create Directive Attribute for date Month / Year in Angular JS

Question

Create Directive Attribute for date Month / Year in Angular JS

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

How to create a Month / Year date format

I have developed the code below, and it is not going through the consoles menus, that is, it is not entering the link:

Note: you are not giving any errors on the console.

<div class="form-group">
                            <label class="control-label">Faz aniversário entre (Mês/Ano)</label>
                            <div class="row">
                                <div class=" col-sm-7">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="material-icons">today</i></span>
                                        <input class="form-control" ng-model="state.filtro.dataInicialAniversario" placeholder="de" formatDateMesAno />
                                    </div>
                                </div>
                                <div class="col-sm-5">
                                    <input class="form-control" ng-model="state.filtro.dataFinalAniversario" placeholder="até" formatDateMesAno />
                                </div>
                            </div>
                        </div>

angular.module("app").directive('formatDateMesAno', directiveFormatMesAno);

    function directiveFormatMesAno() {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function (scope, elem, attr, modelCtrl) {

                console.log(scope);
                console.log(elem);
                console.log(attr);
                console.log(modelCtrl);
            }
        };

javascript angularjs html5 angularjs-directives

asked by anonymous 18.12.2017 / 13:13

2 answers

0

I do not know if you're the best way, but I solved my problem as follows.

.directive('formatDateMesAno', function () {
        return {
            restrict: 'A',
            require: 'ngModel',
            scope: {

            },
            link: function (scope, elem, attr, modelCtrl) {
                $(elem).mask('99/9999');
            }
        };
    });

18.12.2017 / 13:56

JOIN with two queries in the same table Send email On LocalHost or Server without Mail ()

score 1 · Accepted Answer

In angular the name of the directives are normalized by CamelCase , that is, when defining the name formatDateMesAno , in the HTML must be set to format-date-mes-ano , so HTML is case insensitive.

Formatting the date

var myApp = angular.module('myApp', []);

myApp.controller("testectrl", function($scope){
 
})
.directive('mask', ['$timeout', 'maskService', function($timeout, maskService) {
   return {
     require: 'ngModel',
     scope: {
        mask: "@"
     },
     link: function(scope, element, attrs, ctrl) {
         var execute = function () {
             scope.$apply(function () {
                 ctrl.$setViewValue(maskService.maskNumber(ctrl.$modelValue, scope.mask));
                 ctrl.$render();
             });
         };
         element.bind('keyup', function () {
             execute();
         });
         
         $timeout(function () { 
             execute();
         }, 100);
      }
   };
}])
.factory("maskService", [function () {
    var _otherCharacters = /[^0-9A-Za-z]/g;

    var _applyMask = function (string, mask) {
        var formatedString = "";
        var startAt = 0;
        var sectors = mask.split(/[\(\)\.\-\/\s]/g);
        var sectorsSize = 0;
        var separators = mask.replace(/[^\(\)\.\-\/\s]/g, "").split("");
        for (var i = 0; i < sectors.length; i++) {
            formatedString += string.substring(startAt, startAt + sectors[i].length);
            sectorsSize += sectors[i].length;
            if (string.length < sectorsSize + 1) return formatedString;
            if (i < sectors.length - 1) formatedString += separators[i];
            startAt += sectors[i].length;
        }
        return formatedString;
    }
    
    var _removeCharacters = function (string) {
        return string.replace(_otherCharacters, '');
    };

    var _maskNumber = function (string, mask) {
        if (!string) return string;
        return _applyMask(_removeCharacters(string), mask);
    };
    
    return {
        maskNumber: _maskNumber
    };
}])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><formname="gravaDados" ng-app="myApp" ng-controller="testectrl">

<input ng-model="data1" placeholder="dd" mask="XX">
<input ng-model="data2" placeholder="dd/mm" mask="XX/XX">
<input ng-model="data3" placeholder="dd/mm/yyyy" mask="XX/XX/XXXX">
  
</form>