Format date as dd MM yyyy using pipes

Question

I m using the date pipe to format my date  but I just can t get the exact format I want without a workaround  Am I understanding pipes wrongly or is just not possible     our root app component import  Component  from  angular2 core    Component     selector   my-app     providers        template         lt div gt         lt h2 gt Hello   name   lt  h2 gt         lt h3 gt   date   date   ddMMyyyy     should be          date   date   dd      date   date  MM      date   date   yyyy    lt  h3 gt        lt  div gt         directives        export class App     constructor         this name    Angular2      this date   new Date            plnkr view

User · Answer

I am using this Temporary Solution   import  Pipe  PipeTransform  from  angular2 core   import  DateFormatter  from  angular2 src facade intl     Pipe       name   dateFormat     export class DateFormat implements PipeTransform       transform value  any  args  string     any           if  value                var date   value instanceof Date   value   new Date value               return DateFormatter format date   pt    dd MM yyyy

User · Answer

You can find more information about the date pipe here  such as formats   If you want to use it in your component  you can simply do  pipe   new DatePipe  en-US       Use your own locale   Now  you can simply use its transform method  which will be  const now   Date now    const myFormattedDate   this pipe transform now   short

User · Answer

The only thing that worked for me was inspired from here  https   stackoverflow com a 35527407 2310544  For pure dd MM yyyy  this worked for me  with angular 2 beta 16      myDate   date  d       myDate   date  MM       myDate   date  y

User · Answer

Import DatePipe from angular common and then use the below code   var datePipe   new DatePipe        this setDob   datePipe transform userdate   dd MM yyyy      where  userdate  will be your date string  See if this helps   Make note of the lowercase for date and year     d- date M- month y-year   EDIT  You have to pass locale string as an argument to DatePipe  in latest angular  I have tested in angular 4 x  For Example   var datePipe   new DatePipe  en-US

User · Answer

If anyone can looking to display date with time in AM or PM in angular 6 then this is for you     date   date   dd MM yyyy hh mm a      Output    Pre-defined format options  Examples are given in en-US locale    short   equivalent to  M d yy  h mm a   6 15 15  9 03 AM    medium   equivalent to  MMM d  y  h mm ss a   Jun 15  2015  9 03 01 AM    long   equivalent to  MMMM d  y  h mm ss a z   June 15  2015 at 9 03 01 AM GMT 1    full   equivalent to  EEEE  MMMM d  y  h mm ss a zzzz   Monday  June 15  2015 at 9 03 01 AM GMT 01 00    shortDate   equivalent to  M d yy   6 15 15    mediumDate   equivalent to  MMM d  y   Jun 15  2015    longDate   equivalent to  MMMM d  y   June 15  2015    fullDate   equivalent to  EEEE  MMMM d  y   Monday  June 15  2015    shortTime   equivalent to  h mm a   9 03 AM    mediumTime   equivalent to  h mm ss a   9 03 01 AM    longTime   equivalent to  h mm ss a z   9 03 01 AM GMT 1    fullTime   equivalent to  h mm ss a zzzz   9 03 01 AM GMT 01 00     Reference Link

User · Answer

If anyone looking with time and timezone  this is for you     data ct   date   dd-MMM-yy h mm ss a       add z for time zone at the end of date and time format     data ct   date   dd-MMM-yy h mm ss a z

User · Answer

You can achieve this using by a simple custom pipe    import   Pipe  PipeTransform   from   angular core   import   DatePipe   from   angular common     Pipe       name   dateFormatPipe      export class dateFormatPipe implements PipeTransform       transform value  string           var datePipe   new DatePipe  en-US            value   datePipe transform value   dd MM yyyy            return value              currentDate   dateFormatPipe      Advantage of using a custom pipe is that  if you want to update the date format in future  you can go and update your custom  pipe and it will reflect every where     Custom Pipe examples

User · Answer

In my case  I use in component file   import  formatDate  from   angular common       Use your preferred locale import localeFr from   angular common locales fr   import   registerLocaleData   from   angular common             displayDate  string  registerLocaleData localeFr   fr    this displayDate   formatDate new Date     EEEE d MMMM yyyy    fr      And in the component HTML file   lt h1 gt     displayDate     lt  h1 gt    It works fine for me  -

User · Answer

I always use Moment js when I need to use dates for any reason    Try this   import   Pipe  PipeTransform   from   angular core  import   as moment from  moment    Pipe      name   formatDate     export class DatePipe implements PipeTransform      transform date  any  args   any   any        let d   new Date date       return moment d  format  DD MM YYYY             And in the view    lt p gt    date   formatDate    lt  p gt

User · Answer

I think that it s because the locale is hardcoded into the DatePipe  See this link    https   github com angular angular blob master modules  40angular common src pipes date pipe ts   And there is no way to update this locale by configuration right now

User · Answer

Angular  8 2 11   lt td gt    data DateofBirth   date    lt  td gt    Output  Jun 9  1973   lt td gt    data DateofBirth   date   dd MM yyyy     lt  td gt    Output  09 06 1973   lt td gt    data DateofBirth   date   dd MM yyyy hh mm a     lt  td gt    Output  09 06 1973 12 00 AM

User · Answer

Pipe date format bug fixed in Angular 2 0 0-rc 2  this Pull Request  Now we can do the conventional way    valueDate   date   dd MM yyyy      Examples  Current Version  Example Angular 8 x x  Old Versions  Example Angular 7 x Example Angular 6 x Example Angular 4 x Example Angular 2 x   More info in documentation DatePipe

User · Answer

You have to pass the locale string as an argument to DatePipe   var ddMMyyyy   this datePipe transform new Date    dd-MM-yyyy      Pre-defined format options   1        short   equivalent to  M d yy  h mm a   6 15 15  9 03 AM   2        medium   equivalent to  MMM d  y  h mm ss a   Jun 15  2015  9 03 01 AM   3        long   equivalent to  MMMM d  y  h mm ss a z   June 15  2015 at 9 03 01 AM GMT 1   4        full   equivalent to  EEEE  MMMM d  y  h mm ss a zzzz   Monday  June 15  2015 at 9 03 01 AM GMT 01 00   5        shortDate   equivalent to  M d yy   6 15 15   6        mediumDate   equivalent to  MMM d  y   Jun 15  2015   7        longDate   equivalent to  MMMM d  y   June 15  2015   8        fullDate   equivalent to  EEEE  MMMM d  y   Monday  June 15  2015   9        shortTime   equivalent to  h mm a   9 03 AM   10   mediumTime   equivalent to  h mm ss a   9 03 01 AM   11   longTime   equivalent to  h mm ss a z   9 03 01 AM GMT 1   12   fullTime   equivalent to  h mm ss a zzzz   9 03 01 AM GMT 01 00     add datepipe in app component module ts  import   BrowserModule   from   angular platform-browser   import   NgModule   from   angular core   import  DatePipe  from   angular common    NgModule     declarations        AppComponent        imports        BrowserModule        providers        DatePipe        bootstrap   AppComponent     export class AppModule

User · Answer

Date pipes does not behave correctly in Angular 2 with Typescript for Safari browser on MacOS and iOS  I faced this issue recently  I had to use moment js here for resolving the issue  Mentioning what I have done in short      Add momentjs npm package in your project  Under xyz component html   Note here that startDateTime is of data type string       convertDateToString objectName startDateTime       Under xyz component ts    import   as moment from  moment    convertDateToString dateToBeConverted  string    return moment dateToBeConverted   YYYY-MM-DD HH mm ss   format  DD-MMM-YYYY

User · Answer

You can also use momentjs for this sort of things  Momentjs is best at parse  validate  manipulate  and display dates in JavaScript   I used this pipe from Urish  which works fine for me   https   github com urish angular2-moment blob master src DateFormatPipe ts  In the args parameter you can put your date format like   dd mm yyyy

[date] Format date as dd/MM/yyyy using pipes

Examples related to date

Examples related to angular

Examples related to angular-pipe

Examples related to date-pipe