Ng-bootstrap: missing change event for ngbDatepicker

[riksof-zzlalani]

I've developer a custom date picker component, using model-driven forms, I need change event on date picker to catch the change and update

import { Component, Input, Output, forwardRef, EventEmitter } from '@angular/core';
import { NgbDateParserFormatter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
import { S2A_NOOP } from './../../s2app/S2AConstants';
import { NgbDateMomentParserFormatter } from './NgbDateMomentParserFormatter';

// Provider for our component to allow for using ngModel.
export const DATE_INPUT_CONTROL_VALUE_ACCESSOR: any = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => DateInputComponent),
    multi: true
};

@Component({
  selector: 's2a-date',
  templateUrl: 'views/Date.html',
  providers: [ DATE_INPUT_CONTROL_VALUE_ACCESSOR ]
})

export class DateInputComponent implements ControlValueAccessor {

  @Input() required: boolean;
  @Input() placeholder: string;
  @Input() dateFormat: string;
  @Input() readonly: boolean;
  @Input() invalidMessage: string;

  @Output() dateChange = new EventEmitter();

  private currentDate: NgbDateStruct;

  constructor(
  ) {
    new NgbDateMomentParserFormatter("DD-MM-YYYY")
  }

  //Placeholders for the callbacks which are later providesd
  //by the Control Value Accessor
  private onTouchedCallback: () => void = S2A_NOOP;
  private onChangeCallback: (_: any) => void = S2A_NOOP;

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

  set value( v: any ) {
    if ( v !== this.currentDate ) {
      this.setDate( v );
      this.onChangeCallback( v );
    }
  }

  onBlur() {
    this.onTouchedCallback();
  }

  writeValue( v: any ) {
    if ( v !== this.currentDate ) {
      this.setDate( v );
    }
  }

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

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

  setDate( dt: any ): void {
    if ( dt != null && dt !== '' ) {
      //this.currentDate = new Date( dt );

      // Ignore the time.
      //this.currentDate.setHours( 0, 0, 0, 0);
    }
  }

  onDateChange( dt: any ): void {
    this.value = dt;
  }

}

and the usage

<label>{{ placeholder }}</label>
<input class="form-control" [placeholder]="placeholder"
  (change)="onDateChange( $event )"
  ngbDatepicker #d="ngbDatepicker">

<div class="input-group-addon" (click)="d.toggle()" >
  <img src="" style="width: 1.2rem; height: 1rem; cursor: pointer;"/>
</div>

[pkozlowski-opensource]

Not sure what you mean / what you are after... What kind of change event you are looking for? When it should be invoked? Why ngModelChange is not enough?

Out directives implement ControlValueAccessor so you should be plugging into its mechanics - you might have a look at https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/datepicker/datepicker-input.ts where we call registerOnChange to add a callback for model changes.

I'm going to close this one as I believe that all the extensions points are in place. If you disagree than you will have to be more persuasive (provide more info on what you've tried, why it doesn't work etc.). Also please keep in mind that extensibility of existing directives is not our _primary_ target so when you go down the extension path we assume that you are proficient with Angular 2 and this library.

[cguilhermef]

Men, your 'ngModelChange' works when you are simple using ngModel approach. When I want to use masked inputs to add "/", I need to implement my own ControlValueAccessor, that's fail at all.
Just a EventEmitter output property in ngb-datepicker, that can allow us to subscribe changes (like, 'valueChanges' of forms), it will help us a lot!

[deeppatidar]

@riksof-zzlalani Did you find the solution Because I also need change method , so that I write that but method is removed when I look it from inspect element.
Don't understand why the method is getting removed
name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker" >