Add option to write separators before the next char is written about ngmask

[atwright147]

👍

[MarkOfNY]

I have to second this also. I integrated the component but users are already complaining about the fact that slash doesn't appear after second character is typed.

[aromka]

👍

[MarkOfNY]

I have already switched to using own component. Not enough support here.

[atwright147]

@MarkOfNY what are you using?

[MarkOfNY]

I wrote my own directive, which only does "/" formatting for dates.

[atwright147]

@MarkOfNY Would you be willing to share this (open source it)?

[MarkOfNY]

Sure... sorry, no time to plug into open source, but here is the source code. Still testing this so it may need some optimizations. Good luck :)

    .directive('shortDate', function () {
        return {
            require: 'ngModel',
            link: function (scope, element, attr, ngModelCtrl) {

                var elem = element[0];

                function fromUser(text) {
                    var oldVal = ngModelCtrl.$modelValue;
                    var newVal = text;
                    var doTransform = true;

                    //new value is shorter than old value and old value had a forward slash as last charcter while new one does not
                    if (oldVal != null && oldVal.length > 0 && oldVal.length > newVal.length && (oldVal.slice(-1) == '/' && newVal.slice(-1) != '/'))
                        doTransform = false;

                    //remove all slashes first - text.replace(/\//g, '');
                    var transformedInput = newVal;

                    if (doTransform) {
                        transformedInput = text.replace(/[^0-9]/g, '')
                        transformedInput = formatDateMask(transformedInput);
                    }

                    //Enforce max length (doesn't work on the input with directive in place)
                    if (newVal.length >= 11)
                        transformedInput = oldVal;

                    if (transformedInput !== text) {
                        ngModelCtrl.$setViewValue(transformedInput);
                        ngModelCtrl.$render();
                    }


                    return transformedInput;
                }
                ngModelCtrl.$parsers.push(fromUser);


                function formatDateMask(dtVal) {
                    var delimiter = "/";
                    if (dtVal === null)
                        return ''

                    if (dtVal.length >= 2) {
                        dtVal = [dtVal.slice(0, 2), delimiter, dtVal.slice(2)].join('');
                    }

                    if (dtVal.length >= 5) {
                        dtVal = [dtVal.slice(0, 5), delimiter, dtVal.slice(5)].join('');
                    }

                    return dtVal;
                }

            }
        };
    })

[paveltyk]

+1