Angular material DatepickerRange get value on change

Question

I have DatePickerRange of Angular Material and I want to run a function when changing the value in DatePicker I tried with the function (change) but it did not work I would be happy for your help how to do it. Thank you!

This is my html:


    Enter a date range
    
        
        
    
    
    

    Invalid start date
    
    Invalid end date

And that's the function I want to activate:

   @Output() newItemEvent = new EventEmitter();
      addNewDate() {
        this.dateRange.dateStart = this.range.get('start').value;
        this.dateRange.dateEnd = this.range.get('end').value;
        this.newItemEvent.emit(this.dateRange);
      }

user_2627160 · Answer

My approach was to add template reference variables to the inputs for matStartDate and matEndDate. These are dateRangeStart and dateRangeEnd in the template example below:

// Template


  {{reportField.value.label}}

The values of these inputs can then be accessed by a function called by the dateChange output on matEndDate.

// Component

dateRangeChange(dateRangeStart: HTMLInputElement, dateRangeEnd: HTMLInputElement) {
  console.log(dateRangeStart.value);
  console.log(dateRangeEnd.value);
}

This avoids the need for a dateChange event on both inputs.

user_14244587 · Answer

i have something similar to your problem it works for me so i hope it can help you or give your a hint about a solution here is my html :


  Duree du Session :

and the function is :

     saveDate(event: any) {
    // look at how the date is emitted from save
    console.log(event.target.value.begin);
    //this.session.dateDebut = event.target.value.begin;
    console.log(event.target.value.end);

    // change in view
     this.dateRangeDisp = event.target.value;


    // save date range as string value for sending to db

    // ... save to db
  }

user_7660776 · Answer

I faced this problem myself, here is the solution that helped me: component.ts:

    import * as moment from 'moment';
    import { FormControl, FormGroup } from "@angular/forms";
    import { DateAdapter, MAT_DATE_FORMATS,  MatDateFormats } from "@angular/material/core";
    import {  MomentDateAdapter } from '@angular/material-moment-adapter';
        const CUSTOM_DATE_FORMATS: MatDateFormats = {
        parse: {
            dateInput: 'D/MM/YYYY'
        },
        display: {
            dateInput: 'DD/MM/YYYY',
            monthYearLabel: 'MMMM Y',
            dateA11yLabel: 'LL',
            monthYearA11yLabel: 'MMMM Y'
        }
    };
    @Component({
        providers: [
            {provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS},
            {provide: DateAdapter, useClass: MomentDateAdapter}
        ],
    })
    
        @ViewChild('picker') picker: any;
        dateRange: moment.Moment;
        disabled = false;
        tempDate = new Date().setMonth(new Date().getMonth() - 1);
        range = new FormGroup({
            start: new FormControl(new Date(this.tempDate)),
            end: new FormControl(new Date()),
        });
    
        ngAfterViewInit() {
            this.range.valueChanges.pipe(
                debounceTime(200)
            ).subscribe(event => {
                if (event.start && event.end) {
                    this.onDateChanged(event);
                }
            });
        }

  
    
    Enter a date range
    
    
    
    
    
    
    Invalid start date
    Invalid end date

user_13700761 · Answer

@Kirubel and @Irad Amri Thanks!

It works for me in the end this way:

HTML-


    Enter a date range
    
        
        
    
    
    

    Invalid 
 start date
    
    Invalid end 
 date

TS-

@Output() newItemEvent = new EventEmitter();

  addNewDate(type: string, event: MatDatepickerInputEvent) {
    this.dateRange.dateStart = this.range.get('start').value;
    this.dateRange.dateEnd = this.range.get('end').value;
    this.newItemEvent.emit(this.dateRange);
  }

And again, thanks so much for the help!

user_13987286 · Answer

I have used (dateChange)="function()" to trigger the change in date in mat date picker

user_15439733 · Answer

Though Matt's answer is a good one, the downside with that approach is that (dateChange) fires only on the endDate input change. E.g if user changes startDate by typing, his event won't fire.

I ended up using Subject's to combine the Observables from both inputs. This lets me listen when each individual input was changed. Either by picker, or by typing. By checking value carried by the Event we can determine when user has finished picking both valid dates.

  
          Travel date

TS:

  startDatePicker = new Subject>();
  endDatePicker = new Subject>();

  ngOnInit(): void {
    const dateChange$ = combineLatest([this.startDatePicker, this.endDatePicker]).pipe(
      map(([a$, b$]) => ({
        start: a$,
        end: b$
      }))
    );

    dateChange$.subscribe((data) => {
      if (data.start.value && data.end.value) {
        console.log('User has picked both ranges!');
      }
    });
  }

user_6810539 · Answer

Try dateChange instead

Angular material DatepickerRange get value on change

7 Answers