Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular Material mat-datepicker (change) event and format

I am using angular material datepicker directive and I have few problems.

1. When I open date picker dialog and select any date, date shows up in input text box, but I want to call a function when ever any change occur in input text box.

Right now if I manually enter any value in input text box, I am triggering function using (input) directive and it is working fine as shown in code. I want to trigger same function when date gets change using date picker dialog.

2. I also want to change the format of date from mm/dd/yyyy to dd/mm/yyyy when selected from date picker dialog. Here mm/dd/yyyy is set by default in this directive.

<input matInput [matDatepicker]="organizationValue" formControlName="organizationValue" (input)="orgValueChange(i)">
<mat-datepicker-toggle matSuffix [for]="organizationValue"></mat-datepicker-toggle>                 
<mat-datepicker #organizationValue></mat-datepicker>
like image 764
Umair Jameel Avatar asked Apr 06 '18 18:04

Umair Jameel


People also ask

How can I change the format of MAT Datepicker?

How to change Mat-Datepicker date format to DD/MM/YYYY in simplest way? First, bind the format to your mat-datepicker. export const MY_FORMATS = { parse: { dateInput: 'LL' }, display: { dateInput: 'YYYY-MM-DD', monthYearLabel: 'YYYY', dateA11yLabel: 'LL', monthYearA11yLabel: 'YYYY' } };

What is Matdatepicker?

To implement date picker in Angular we can use angular material datepicker module called MatDatepickerModule . Date picker is a component which allow users to choose a date from the calendar pop up or enter a date through text input.


2 Answers

from docs you can use one of the below events based on your requirement

@Output()
dateChange(): EventEmitter<MatDatepickerInputEvent<D>>

Emits when a change event is fired on this .

@Output()
dateInput(): EventEmitter<MatDatepickerInputEvent<D>>

Emits when an input event is fired on this .

For example:

<input matInput #ref [matDatepicker]="organizationValue" formControlName="organizationValue" (dateChange)="orgValueChange(ref.value)">

or

 <input matInput #ref [matDatepicker]="organizationValue" formControlName="organizationValue" (dateInput)="orgValueChange(ref.value)">
like image 95
Vikas Avatar answered Oct 20 '22 12:10

Vikas


  1. In your html you can use (ngModelChange)="functionName()" to trigger any function with the change of the date and declare the function in your ts.

  2. To change the format of the date :

Add this to app.module.ts:

import{MatDateFormats, MAT_DATE_FORMATS, NativeDateAdapter, DateAdapter} from '@angular/material';

const MY_DATE_FORMATS = {
    parse: {
        dateInput: { day: 'numeric', month: 'numeric', year: 'numeric' }
    },
    display: {
        dateInput: 'input',
        monthYearLabel: { year: 'numeric', month: 'short' },
        dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric' },
        monthYearA11yLabel: { year: 'numeric', month: 'long' },
    }
 };

export class AppDateAdapter extends NativeDateAdapter {

    format(date: Date, displayFormat: Object): string {
        if (displayFormat === 'input') {
            const day = date.getDate();
            const month = date.getMonth() + 1;
            const year = date.getFullYear();
            return `${day}/${month}/${year}`;
        } else {
            return date.toDateString();
        }
    }
}

Add the below in providers of app.module.ts:

{provide: DateAdapter, useClass: AppDateAdapter},  
{provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS}
like image 45
Rak2018 Avatar answered Oct 20 '22 13:10

Rak2018