components: datepicker: (change) event does not work in mdInput

@da45 @mohi86 For now, you can split out the [(ngModel)] like this

<input [ngModel]="myDate" (ngModelChange)="updateMyDate($event)">

updateMyDate(newDate) {
  this.myDate = newDate;
  this.runOtherCalculations(newDate);
}

https://plnkr.co/edit/aZKLaA5qlZj71AqD5ZFz?p=preview

Hello guys,

@mohi86 mentioned that he used (selectedChange) event but it doesn’t work, me too. In the latest material 2 release, you can use (selectedChanged) instead of (selectedChange).

<md-datepicker #picker (selectedChanged)=“update($event)”>

Close this issue, now it works.

<mat-form-field>
   <input matInput [matDatepicker]="pickerStart" placeholder="From" (dateInput)="yourFunction($event)" (dateChange)="yourFunction($event)" disabled>
   <mat-datepicker-toggle matSuffix [for]="pickerStart"></mat-datepicker-toggle>
   <mat-datepicker disabled="false" #pickerStart></mat-datepicker>
</mat-form-field>

(dateInput) and (dateChange) works just fine

@kylelix7 @alexandrupaul7

With the master build, you can do something like this. It will respond to input changes and datepicker selections.

Observable
  .merge(this.datepickerInput.dateChange, this.datepickerInput.dateInput)
  .map(e => e.value)
  .distinctUntilChanged((a, b) => a.toString() === b.toString())
  .subscribe(date => console.log(date));

http://plnkr.co/edit/YFwWl6sK7VxdUgsEiDM5?p=preview

The following works for me. Note the spelling of the event!

<md-datepicker #picker (selectedChanged)="updateDate($event)">

selectedChanged will work for a mouse click in the datepicker. to get the change from the text-field you can do as @willshowell showed in this comment above: https://github.com/angular/material2/issues/4615#issuecomment-303460818

The docs as of beta-10 say: https://material.angular.io/components/datepicker/overview#input-and-change-events

To get both the mouse click and the text field changes via the docs suggested implementation, see @willshowell’s plunkr above: https://github.com/angular/material2/issues/4615#issuecomment-319952531

At first I tried this example based on the docs, but it didn’t work: https://github.com/angular/material2/blob/master/src/demo-app/datepicker/datepicker-demo.ts

@willshowell thanks!

what about this: <md-datepicker #picker (selectedChange)=“updateDate()”></md-datepicker>

this is not working either. Here’s the code from @angular/material

MdCalendar.propDecorators = { ‘startAt’: [{ type: Input },], ‘startView’: [{ type: Input },], ‘selected’: [{ type: Input },], ‘minDate’: [{ type: Input },], ‘maxDate’: [{ type: Input },], ‘dateFilter’: [{ type: Input },], ‘selectedChange’: [{ type: Output },], };

What event can I hook into when a date is selected?

Is there an event to identify when the user clicks either next/previous month? I can’t find it 😕

Hi all, What if I need to use rxjs/Observable? Is there any workwround? I was hoping to subscribe the changes, since it can be changed by typing or the button. Any suggestion is appreciated.

    <md-input-container>
      <input mdInput #businessDatePickerInput [mdDatepicker]="businessDatePicker" placeholder="business date">
      <button mdSuffix [mdDatepickerToggle]="businessDatePicker"></button>
    </md-input-container>
    <md-datepicker #businessDatePicker></md-datepicker>

    Observable.fromEvent(this.businessDatePickerInput.nativeElement, 'change')
      .subscribe(() => {
        console.log('on change');
      });

selectedChanged event is working fine for me when I select a date with a mouse.

However, if I manually change the date I need to be able to fire change or blur event which is not working currently.

https://plnkr.co/edit/rphB4cgzUmFG7Insfpqx?p=preview

Is there a workaround for this and will this be officially implemented?

EDIT:

<md-input-container>
  <input mdInput [mdDatepicker]="picker" placeholder="Choose a date" (change)="called(2)">
  <button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>
<md-datepicker #picker (selectedChanged)="called(1)" ></md-datepicker>

Change/blur event works on the input tag.

I would say this issue is solved using the selectedChanged event. However, would be nice to (also?) have the change event. All other inputs use change, why suddenly the selectedChanged event?

After further test, the binding problem described in my previous post was related to the localization (French) of the date format (dd/mm/yyyy) instead of (mm/dd/yyyy) wich works fine.

@da45 Thanks, but I have the same issue, I need to run some calculations when the date is selected. I used angular2-material-datepicker but it’s not working well with the angular material form elements.