Add option to write separators before the next char is written

[federomano]

Hi! i love this plugin and would like to propose a feature:
Right now, if im writing a date (for example) and i want to write 10/30/2015, the first / will appear after i write the number 3.
What i would like to propose, is to add an option to write the / before the 3, so when i write 10, it auto writes a /.
Sorry for the bad english, i don't know how to explain it better, but i think the idea is pretty much clear.
I think doing this would help the user to learn about the auto format really fast, reducing the possible errors, since the user will not try to write the separators. Right now, the user will probably try to write a / and that is a ver common wrong behavior.
What do you think?
Thanks!

[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