JQuery UI Datepicker in angular2

Question

I am new to Angular2.
I am trying to implement JQuery ui datepicker in angular2.

I have written a datePicker directive, there i enabled datepicker. Here i am able to select date but finding difficulty to emit selected date to the parent component.

to overcome this i created an object on window object and passing component reference to that object. from there i am calling component function.

I feel this is not a best practice to do.

Can someone help me to do in right way.

import { Directive, ElementRef, Input, NgZone,HostListener,Output,EventEmitter } from '@angular/core';
    declare  var $:any;
    @Directive({
      selector: '[uiDatePicker]',
     })
    export class UiDatePickerDirective {
      @Input('uiDatePicker') setDate: string;
      @Output() onSelectDate = new EventEmitter();  
      private el: HTMLElement;
      constructor(el: ElementRef,public zone:NgZone) {
        this.el = el.nativeElement;

        window.angularComponentRef = {
          zone: this.zone, 
          component: this
        };
      }

      doEmitDate(dateText:string){
          this.onSelectDate.emit(dateText);
      }
      ngOnInit() {
        $(this.el).datepicker({
         onSelect: function(dateText:string) {
            window.angularComponentRef.component.doEmitDate(dateText);
         }
        });
       }
}

Here i dont like to use window.angularComponentRef.component object. As it is just storing the reference in global object. this is not good for an application.

Community · Accepted Answer · 2017-05-23 11:54:15Z

2

import { Directive, ElementRef, Input, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";

declare var $: any;

export const CUSTOM_INPUT_DATE_PICKER_CONTROL_VALUE_ACCESSOR: any = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => UiDatePickerDirective),
    multi: true
};

@Directive({
    selector: '[uiDatePicker]',
    host: { '(blur)': 'onTouched($event)' },
    providers: [CUSTOM_INPUT_DATE_PICKER_CONTROL_VALUE_ACCESSOR]
})
export class UiDatePickerDirective implements ControlValueAccessor {
    private innerValue: string;

    @Input('changeMonth') changeMonth: boolean = true;
    @Input('changeYear') changeYear: boolean = true;

    constructor(private el: ElementRef) {
    }

    ngOnInit() {
        $(this.el.nativeElement).datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: 'dd/mm/yy'
        }).on('change', (e: any) => {
            this.onChange(e.target.value);
        });
    }


    public onChange: any = (_:any) => { /*Empty*/ }
    public onTouched: any = () => { /*Empty*/ }

    get value(): any {
        return this.innerValue;
    };

    //set accessor including call the onchange callback
    set value(v: any) {
        if (v !== this.innerValue) {
            this.innerValue = v;
            this.onChange(v);
        }
    }


    writeValue(val: string): void {
        this.innerValue = val;
        $(this.el.nativeElement).datepicker("setDate", this.innerValue);
    }

    registerOnChange(fn: any): void {
        this.onChange = fn;
    }

    registerOnTouched(fn: any): void {
        this.onTouched = fn;
    }
}

<input type="text" uiDatePicker [(ngModel)]="note.ValidTo"/>

This is a modified version from here.

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Jan 21, 2017 at 4:46

kravits88

13.1k1 gold badge53 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Praveen Rawat Over a year ago

i have implemented this solution in my application. One problem i am facing is how to set a date pragmatically in textbox which has this directive. I am using Form Builder to set data.

kravits88 Over a year ago

Update the note.ValidTo variable in angular?

Praveen Rawat Over a year ago

I dont have no idea about that. where is this variable available? I have tried to google it but no luck!

Praveen Rawat Over a year ago

I can pass input field with date and set it in OnInIt() method like this $(this.el.nativeElement).val(value);. But its a work around.

kravits88 Over a year ago

Ngmodel is the variable angular uses in the directive. You can get and set the date with this attribute. You should read up on ngmodel.

|

hotforfeature · Accepted Answer · 2016-06-07 16:17:48Z

1

For all intents and purposes, you can use the var self = this ideology and closures to maintain a reference to the component.

If you aren't doing any pre-processing in the onSelect callback, you can further simplify things by passing a bound doEmitDate function as the onSelect handler.

import { Directive, ElementRef, Input, NgZone,HostListener,Output,EventEmitter } from '@angular/core';
declare  var $:any;

@Directive({
  selector: '[uiDatePicker]',
})
export class UiDatePickerDirective {
  @Input('uiDatePicker') setDate: string;
  @Output() onSelectDate = new EventEmitter();
  private el: HTMLElement;

  constructor(el: ElementRef, public zone: NgZone) {
    this.el = el.nativeElement;
  }

  doEmitDate(dateText:string){
    this.onSelectDate.emit(dateText);
  }

  ngOnInit() {
    const component = this;
    $(this.el).datepicker({
      onSelect: function(dateText: string) {
        component.doEmitDate(dateText);
      }
    });

    // Or if you're not doing anything else in the onSelect callback
    $(this.el).datepicker({
      onSelect: this.doEmitDate.bind(this)
    });
  }
}

answered Jun 7, 2016 at 16:17

hotforfeature

2,5981 gold badge18 silver badges24 bronze badges

4 Comments

ayyappa maddi Over a year ago

I think it's a simple answer. Can you suggest me any other ways to do same thing in angular2 manner.

hotforfeature Over a year ago

There isn't an Angular-specific way to do something like this. Grabbing the nativeElement using ElementRef is the only thing to keep in mind when passing elements to external libraries in these situations, and you're doing just that. Sometimes the simple answer is the correct answer, no need to complicate.

Yury Tolochko Over a year ago

Also you can simplify context binding with arrow functions: onSelect: (date: string) => this.onSelectDate.emit(date)

Yury Tolochko Over a year ago

One more note: jQuery components often trigger a lot of angular2 change detection circles. To prevent it you should run jQuery bindings outside angular zone (ngZone.runOutside)

Collectives™ on Stack Overflow

JQuery UI Datepicker in angular2

2 Answers 2

6 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related