Autocomplete off on Angular Directive for Date Picker

Question

I have a directive for JQuery Date picker which injects date picker into input HTML control. This was developed by a previous developer and I am pretty new to Angular at this moment.

My question is that is there any way to prevent showing auto complete on all the date pickers that we inject via this directive?

export class DanialDatePickerDirective implements ControlValueAccessor {

    constructor(protected el: ElementRef, private renderer: Renderer) { }

    @Input() dateformat: string = "DD-MMM-YY";
    @Input() ngModel: any;
    @Input() setDefaultDate: boolean;
    onModelChange: Function = () => { };
    onModelTouched: Function = () => { };

    writeValue(value: any) {
        if (value) {
            var ff = new Date(value);
            $(this.el.nativeElement).datepicker("setDate", ff);
        }
        else {
            $(this.el.nativeElement).datepicker("setDate", "");
        }
    }

    registerOnChange(fn: Function): void {
        this.onModelChange = fn;
    }

    registerOnTouched(fn: Function): void {
        this.onModelTouched = fn;
    }

    onBlur() {
        this.onModelTouched();
    }

    ngAfterViewInit() {
        var self = this;
        $(this.el.nativeElement).datepicker({
            dateFormat: 'dd-M-y',
            changeMonth: true,
            changeYear: true,
            showOtherMonths: true,
            selectOtherMonths: true
        });

        if (this.setDefaultDate) {
            var ff = new Date(self.ngModel);
            setTimeout(function () {
                $(self.el.nativeElement).datepicker("setDate", ff);
            }, 200);
        }

        $(this.el.nativeElement).on('change', (e: any) => {
            var model = e.target.value;
            var date = null;
            var monthstring = '';
            if (model.indexOf("-") > 0){
                monthstring = model.substring(model.indexOf("-") + 1, 5);
            }

            if (isNaN(parseInt(monthstring))) { 
                var tt = moment(model, "DD-MMM-YY").format('YYYY-MM-DD'); 
                date = tt;
                model = moment(model, "DD-MMM-YYYY").format('MM-DD-YYYY') 
            }
            else {

                date = moment(model, "DD-MM-YYYY").format('YYYY-MM-DD'); 
                model = moment(model, "DD-MM-YYYY").format('MM-DD-YYYY') 
            }

            $(".ui-datepicker a").removeAttr("href"); 
            self.onModelChange(date);

             self.writeValue(date.toString());
        });
    }

}

Apparantly it is not so much of an Angular problem: https://stackoverflow.com/questions/2530/how-do-you-disable-browser-autocomplete-on-web-form-field-input-tag — jcuypers, Apr 15 '19 at 06:56

score 2 · Answer 1 · answered Apr 15 '19 at 09:24

2

The only approach who works for me:

First, make sure to set autocomplete="off" on both, the input element itself and the parent form.

Second, make sure to assign an unique name to your input field always. This can be achieved by simply generating a random number and using this number in the name of the field.

  private getUniqueName() {
    return Math.floor(Math.random() * Date.now());
  }

Explanation:

In the past, many developers would add autocomplete="off" to their form fields to prevent the browser from performing any kind of autocomplete functionality. While Chrome will still respect this tag for autocomplete data, it will not respect it for autofill data. https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill.

So autocomplete="off" solves the autocomplete issue. But to solve the autofill you need to play dirty with the browser by changing the name of the input over an over again, that way the browser will never know how to autofill ;)

answered Apr 15 '19 at 09:24

guzmanoj

1,873
19
28

Wouldn't it screw up the functionality? I mean If we have mix codes with Jquery and Angular etc.? – Kirk Apr 15 '19 at 11:06
1

To be fair, I'd suggest to take another approach for your DatePicker component, one with no jQuery dependencies. There's a lot of DatePickers on npmjs ready to use and Angular ready. – guzmanoj Apr 15 '19 at 12:06
Problem is this is a legacy system, and a lot of developers are working on the same. Scrapping what we have now entirely is not possible I guess. Also my task is low in story points. – Kirk Apr 15 '19 at 12:43
1

Go for the autocomplete="off" approach first. The functionality of the DatePicker will remain the same :) – guzmanoj Apr 15 '19 at 13:11
In the case of the parent form, yes. For the the input tag you can use an @Input as a flag to set "autocomplete=off" or not. Same for the trick. – guzmanoj Apr 16 '19 at 07:58

Autocomplete off on Angular Directive for Date Picker

1 Answers1