Asked by:
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>
Saturday, March 9, 2019 1:49 AM
All replies
-
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/yyyyIf 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.
With Regards,
Fei Han
Monday, March 11, 2019 8:35 AM -
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 meMonday, March 11, 2019 1:25 PM -
User61956409 posted
Hi ahmedbarbary,
how to link between matdatepicker and custom data adapterIn [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
Wednesday, March 13, 2019 9:58 AM