Format Date time in AngularJS

Question

How do I properly display the date and time in AngularJS   The output below shows both the input and the output  with and without the AngularJS date filter   In    v Dt     AngularJS    v Dt   date  yyyy-MM-dd HH mm ss Z      This prints   In  2012-10-16T17 57 28 556094Z  AngularJS  2012-10-16T17 57 28 556094Z   The desired display format is 2010-10-28 23 40 23 0400 or 2010-10-28 23 40 23 EST

User · Answer

Here is a filter that will take a date string OR javascript Date() object. It uses Moment.js and can apply any Moment.js transform function, such as the popular 'fromNow'

angular.module('myModule').filter('moment', function () {
  return function (input, momentFn /*, param1, param2, ...param n */) {
    var args = Array.prototype.slice.call(arguments, 2),
        momentObj = moment(input);
    return momentObj[momentFn].apply(momentObj, args);
  };
});

So...

{{ anyDateObjectOrString | moment: 'format': 'MMM DD, YYYY' }}

would display Nov 11, 2014

{{ anyDateObjectOrString | moment: 'fromNow' }}

would display 10 minutes ago

If you need to call multiple moment functions, you can chain them. This converts to UTC and then formats...

{{ someDate | moment: 'utc' | moment: 'format': 'MMM DD, YYYY' }}

https://gist.github.com/cmmartin/341b017194bac09ffa1a

User · Answer

Your code should work as you have it see this fiddle   You ll have to make sure your v Dt is a proper Date object for it to work though     dt   date  yyyy-MM-dd HH mm ss Z      or if dateFormat is defined in scope as dateFormat    yyyy-MM-dd HH mm ss Z      dt   date dateFormat

User · Answer

I know this is an old item  but thought I d throw in another option to consider    As the original string doesn t include the  T  demarker  the default implementation in Angular doesn t recognize it as a date  You can force it using new Date  but that is a bit of a pain on an array  Since you can pipe filters together  you might be able to use a filter to convert your input to a date and then apply the date  filter on the converted date  Create a new custom filter as follows   app  filter  asDate   function          return function  input            return new Date input               Then in your markup  you can pipe the filters together     item myDateTimeString   asDate   date  shortDate

User · Answer

Add  filter dependency in controller   var formatted datetime    filter  date   variable Containing time  yyyy-MM-dd HH mm ss Z

User · Answer

You can use momentjs to implement date-time filter in angularjs  For example   angular module  myApp     filter  formatDateTime   function   filter        return function  date  format            if  date                return moment Number date   format format     DD MM YYYY h mm A                      else             return                  Where date is in time stamp format

User · Answer

Have you seen the Writing directives  short version  section of the documentation   HTML   lt div ng-controller  Ctrl2  gt        Date format   lt input ng-model  format  gt   lt hr  gt        Current time is   lt span my-current-time  format  gt  lt  span gt   lt  div gt     JS  function Ctrl2  scope       scope format    M d yy h mm ss a

User · Answer

Here are a few popular examples    lt div gt   myDate   date  M d yyyy    lt  div gt  7 4 2014   lt div gt   myDate   date  yyyy-MM-dd    lt  div gt  2014-07-04   lt div gt   myDate   date  M d yyyy HH mm ss    lt  div gt   7 4 2014 12 01 59

User · Answer

Simplly if you want to output like  Jan 30  2017 4 31 20 PM  then follow to simple step   step1-  Declare following variable in js controller   scope current time   new Date      step2- display in html page like    current time   date  medium

User · Answer

we can format the date on view side in angular is very easy    please check the below example     dt    date     dd-MM-yyyy

User · Answer

I would suggest you to use moment js it has got a good support for date formatting according to locales   create a filter that internally uses moment js method for formatting date

User · Answer

Inside a controller the format can be filtered by injecting  filter   var date    filter  date   new Date    MMM dd  yyyy

User · Answer

you can get the  date  filter like this   var today    filter  date   new Date    yyyy-MM-dd HH mm ss Z      This will give you today s date in format you want

User · Answer

v Dt is likely not a Date   object    See http   jsfiddle net southerd xG2t8   but in your controller   scope v Dt   Date parse scope v Dt

[javascript] Format Date time in AngularJS

Examples related to javascript

Examples related to angularjs

Examples related to date

Examples related to datefilter