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

  • 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/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

    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 me

    Monday, March 11, 2019 1:25 PM
  • 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

    Wednesday, March 13, 2019 9:58 AM