How to format date in angularjs

Question

I want to format date as mm dd yyyy  I tried the following and none of it works for me  Can anyone help me with this   reference  ui-date   lt input ui-date ui-date-format  mm dd yyyy  ng-model  valueofdate    gt     lt input type  date  ng-model  valueofdate    gt

User · Answer

If you are not having an input field  rather just want to display a string date with a proper formatting  you can simply go for    lt label ng-bind  formatDate date     date  MM dd yyyy   gt  lt  label gt    and in the js file use           Function        Description    Triggered while displaying expiry date      scope formatDate   function date             var dateOut   new Date date             return dateOut           This will convert the date in string to a new date object in javascript and will display the date in format MM dd yyyy    Output  12 15 2014  Edit If you are using a string date of format  2014-12-19 20 00 00  string format  passed from a PHP backend   then you should modify the code to the one in  https   stackoverflow com a 27616348 1904479  Adding on further From javascript you can set the code as    scope eqpCustFields i  Value    filter  date   new Date dateValue   yyyy-MM-dd      that is in case you already have a date with you  else you can use the following code to get the current system date    scope eqpCustFields i  Value    filter  date   new Date    yyyy-MM-dd      For more details on date Formats  refer    https   docs angularjs org api ng filter date

User · Answer

Angular js has a built-in date filter   demo     in your controller   scope date    20140313T00 00 00       in your view  date property  filtered with date filter and format  MM dd yyyy   lt p ng-bind  date   date  MM dd yyyy   gt  lt  p gt      produces 03 13 2014   You can see the supported date formats in the source for the date filter   edit   If you re trying to get the correct format in the datepicker  not clear if you re using datepicker or just trying to use it s formatter   those supported format strings are here  https   api jqueryui com datepicker

User · Answer

This isn t really exactly what you are asking for - but you could try creating a date input field in html something like    lt input type  date  ng-model  myDate    gt    Then to print this on the page you would use    lt span ng-bind  convertToDate myDate    date  medium   gt  lt  span gt    Finally  in my controller I declared a method that creates a date from the input value  which in chrome is apparently parsed 1 day off     scope convertToDate   function  stringDate     var dateOut   new Date stringDate     dateOut setDate dateOut getDate     1     return dateOut       So there you have it  To see the whole thing working see the following plunker  http   plnkr co edit 8MVoXNaIDW59kQnfpaWW p preview  Best of luck

User · Answer

I am using this and it is working fine     1288323623006   date  medium     Oct 29  2010 9 10 23 AM   1288323623006   date  yyyy-MM-dd HH mm ss Z     2010-10-29 09 10 23  0530   1288323623006   date  MM dd yyyy   h mma     10 29 2010   9 10AM   1288323623006   date  MM dd yyyy  at  h mma     10 29 2010 at 9 10AM

User · Answer

var app angular module  myApp               app controller  myController  function  scope                           scope names     1288323623006   1388323623006                   Here Controller name is  myController  and app name is  myApp     lt div ng-app  myApp  ng-controller  myController  gt           lt ul gt               lt li ng-repeat  x in names  gt                    x   date  mm-dd-yyyy                  lt  li gt            lt  ul gt       lt  div gt    Result will look like this  -   10-29-2010   01-03-2013

User · Answer

convertToDate    date    dateformat                                                 rootScope dateFormat    MM dd yyyy

User · Answer

After looking at all the above solutions  the following was the quickest solution for me  If you are using angular-material     lt md-datepicker ng-model  member reg date  md-placeholder  Enter date  gt  lt  md-datepicker gt    To set the format   app config function  mdDateLocaleProvider         mdDateLocaleProvider formatDate   function date               Requires Moment js OR enter your own formatting code here             return moment date  format  DD-MM-YYYY                 Edit  You also need to set the parseDate for typing in a date  from this answer Change format of md-datepicker in Angular Material    mdDateLocaleProvider parseDate   function dateString        var m   moment dateString   DD MM YYYY   true       return m isValid     m toDate     new Date NaN

User · Answer

I had the same issue and as the above comments  thought there must be a native method in JavaScript  The thing is new Date valueofdate  returns a Date object   But  check in http   www w3schools com js js date formats asp  the part that says leading zero  A date from a String  for example an echo from PHP  must be like    valueofdate   date  Y-n-j  strtotime  theStringFromQuery       This will pass a String  for example   1999-3-3  and JavaScript will do the parsing to an object with right format with   scope valueofdate   new Date valueofdate     lt input ui-date ui-date-format  mm dd yyyy  ng-model  valueofdate    gt   lt input type  date  ng-model  valueofdate    gt    Link to PHP for date formats  http   www w3schools com php func date date format asp

User · Answer

Ok the issue it seems to come from this line   https   github com angular-ui ui-date blob master src date js L106   Actually this line it s the binding with jQuery UI which it should be the place to inject the data format   As you can see in var opts there is no property dateFormat with the value from ng-date-format as you could espect   Anyway the directive has a constant called uiDateConfig to add properties to opts   The flexible solution  recommended      From here you can see you can insert some options injecting in the directive a controller variable with the jquery ui options    lt input ui-date  dateOptions  ui-date-format  mm dd yyyy  ng-model  valueofdate    gt   myAppModule controller  MyController   function  scope         scope dateOptions             dateFormat   dd-M-yy               The hardcoded solution   If you don t want to repeat this procedure all the time change the value of uiDateConfig in date js to     constant  uiDateConfig     dateFormat   dd-M-yy

User · Answer

ng-bind  reviewData dateValue replace   Date       replace            date  MM dd yyyy    Use this should work well     The reviewData and dateValue fields can be changes as per your parameter rest can be left same

User · Answer

scope dateField  value  in ctrl  lt div ng-bind  dateField   date  MM dd yyyy   gt  lt  div gt

User · Answer

I use filter   filter  toDate   function       return function items        return new Date items              then       2018-05-06 09 04 13    toDate   date  dd MM yyyy hh mm

User · Answer

see angular date api   AngularJS API  date  The Angular - date filter    Usage      date expression   date      format        timezone          Exampe   Code     lt span gt     1288323623006    date  MM dd yyyy     lt  span gt    Result   10 29 2010

User · Answer

Just pass UTC date format from your server side code to client side  and use below syntax -      dateUTCField    Z    date    mm dd yyyy      e g  dateUTCField    2018-01-09T10 02 32 273  then it display like 01 09 2018

User · Answer

This will work      oD OrderDate replace   Date       replace            date  MM dd yyyy       NOTE  once you replace these then remaining date millis will be converted to given foramt

[angularjs] How to format date in angularjs

Examples related to angularjs

Examples related to date

Examples related to format

Examples related to date-format

Examples related to datefilter