when convert datepicker from mm/dd/yyyy to dd/mm/yyyy get error angular 7?

Question

User696604810 posted

problem

when convert date from mm/dd/yyyy to dd/mm/yyyy get error angular 7?

Problem

when convert date picker control to format dd/mm/yyyy i get error as below

compiler.js:2427 Uncaught Error: Template parse errors:
Parser Error: Cannot have a pipe in an action expression at column 25 in [api.SHeader.salesDate | date:'dd/MM/yyyy'=$event] in ng:///AppModule/OrderComponent.html@23:103 ("           <input name="salesDate" matInput [matDatepicker]="salesDate" placeholder="Select a date" [ERROR ->][(ngModel)] = "api.SHeader.salesDate | date:'dd/MM/yyyy'" (ngModelChange)="api.SHeader.salesDate= $ev"): ng:///AppModule/OrderComponent.html@23:103
Parser Error: Unexpected token , expected identifier or keyword at the end of the expression [api.SHeader.salesDate | date:'dd/MM/yyyy'=$event] in ng:///AppModule/OrderComponent.html@23:103 ("           <input name="salesDate" matInput [matDatepicker]="salesDate" placeholder="Select a date" [ERROR ->][(ngModel)] = "api.SHeader.salesDate | date:'dd/MM/yyyy'" (ngModelChange)="api.SHeader.salesDate= $ev"): ng:///AppModule/OrderComponent.html@23:103
The pipe '' could not be found ("           <input name="salesDate" matInput [matDatepicker]="salesDate" placeholder="Select a date" [ERROR ->][(ngModel)] = "api.SHeader.salesDate | date:'dd/MM/yyyy'" (ngModelChange)="api.SHeader.salesDate= $ev"): ng:///AppModule/OrderComponent.html@23:103
Parser Error: Cannot have a pipe in an action expression at column 25 in [api.SHeader.salesDate | date:'dd/MM/yyyy'=$event] in ng:///AppModule/OrderComponent.html@23:103 ("]="salesDate" placeholder="Select a date" [(ngModel)] = "api.SHeader.salesDate | date:'dd/MM/yyyy'" [ERROR ->](ngModelChange)="api.SHeader.salesDate= $event"  >

What I have tried:

 <mat-label>Date</mat-label>
         <input name="salesDate" matInput [matDatepicker]="salesDate" placeholder="Select a date" [(ngModel)] = "api.SHeader.salesDate | date:'dd/MM/yyyy'" (ngModelChange)="api.SHeader.salesDate= $event"  >
         <mat-datepicker-toggle matSuffix [for]="salesDate"></mat-datepicker-toggle>
         <mat-datepicker #salesDate></mat-datepicker>
     </mat-form-field>

Answer 1

User61956409 posted

Hi ahmedbarbary,

Parser Error: Cannot have a pipe in an action expression at column 25 in [api.SHeader.salesDate | date:'dd/MM/yyyy'=$event] in ng:///AppModule/OrderComponent.html@23:103 ("           <input name="salesDate" matInput [matDatepicker]="salesDate" placeholder="Select a date" [ERROR ->][(ngModel)] = "api.SHeader.salesDate | date:'dd/MM/yyyy'" (ngModelChange)="api.SHeader.salesDate= $ev"): ng:///AppModule/OrderComponent.html@23:103

[(ngModel)] = "api.SHeader.salesDate | date:'dd/MM/yyyy'" 

In your code, we can find that you are using [()] with a pipe, which causes the error. You can modify your code as below.

<input name="salesDate" matInput [matDatepicker]="salesDate" placeholder="Select a date" [ngModel] = "api.SHeader.salesDate | date:'dd/MM/yyyy'" (ngModelChange)="api.SHeader.salesDate= $event"  >

Besides, this SO thread ["Using Pipes within ngModel on INPUT Elements in Angular"](https://stackoverflow.com/questions/39642882/using-pipes-within-ngmodel-on-input-elements-in-angular) discussed similar issue, you can refer to it.

convert date picker control to format dd/mm/yyyy

If you'd like to display date in 'dd/mm/yyyy' format for matDatepicker, you can customize the parse and display formats to achieve the requirement.

Custom Date Adapter

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

export class AppDateAdapter extends NativeDateAdapter {
    parse(value: any): Date | null {
     if ((typeof value === 'string') && (value.indexOf('/') > -1)) {
       const str = value.split('/');
       const year = Number(str[0]);
       const month = Number(str[1]) - 1;
       const date = Number(str[2]);
       return new Date(year, month, date);
     }
     const timestamp = typeof value === 'number' ? value : Date.parse(value);
     return isNaN(timestamp) ? null : new Date(timestamp);
   }

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

    private _to2digit(n: number) {
        return ('00' + n).slice(-2);
    }
 }

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

Test Result:

This SO thread discussed about how to change date format to 'dd/mm/yyyy', please refer to it.

https://stackoverflow.com/questions/46392275/angular-material-2-change-datepicker-date-format-mm-dd-yyyy-to-dd-mm-yyyy-s 

With Regards,

Fei Han

Answer 2

User696604810 posted

thank you for reply

if i need to apply custom data adapter can you tell me by details

because i beginner in angular 

first thing i will create class 

AppDateAdapter.ts
second  steps how to link between matdatepicker and custom data adapter
what i define in app.modeule.ts
i will apply that on matdatepicker on 
order.component.ts
order.component.html
what i write on order.component.ts
what i write in order.component.html
how to link matdatepicker with custom data adapter
please help me

Answer 3

User61956409 posted

Hi ahmedbarbary,

how to link between matdatepicker and custom data adapter

In [SO thread](https://stackoverflow.com/questions/46392275/angular-material-2-change-datepicker-date-format-mm-dd-yyyy-to-dd-mm-yyyy-s), Fetrarij has shared a working sample in stackblitz, and in datepicker-overview-example.ts file, like below, you can find how to make custom data adapter work with matdatepicker.  

import {Component} from '@angular/core';
import { NativeDateAdapter, DateAdapter, MAT_DATE_FORMATS } from "@angular/material";
import { AppDateAdapter, APP_DATE_FORMATS} from './date.adapter';

/** @title Basic datepicker */
@Component({
  selector: 'datepicker-overview-example',
  templateUrl: 'datepicker-overview-example.html',
  styleUrls: ['datepicker-overview-example.css'],
  providers: [
    {
        provide: DateAdapter, useClass: AppDateAdapter
    },
    {
        provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS
    }
    ]
})
export class DatepickerOverviewExample {}

With Regards,

Fei Han