Format Date time in AngularJS


Javascript Problem Overview

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

Javascript Solutions

Solution 1 - Javascript

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 }}

Solution 2 - Javascript

v.Dt is likely not a Date() object.


but in your controller:

scope.v.Dt = Date.parse(scope.v.Dt);

Solution 3 - Javascript

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:

.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'}}

Solution 4 - Javascript

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.

Solution 5 - Javascript

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 =, 2),
        momentObj = moment(input);
    return momentObj[momentFn].apply(momentObj, args);


{{ 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' }}

Solution 6 - Javascript

Here are a few popular examples:

<div>{{myDate | date:'M/d/yyyy'}}</div> 7/4/2014

<div>{{myDate | date:'yyyy-MM-dd'}}</div> 2014-07-04

<div>{{myDate | date:'M/d/yyyy HH:mm:ss'}}</div> 7/4/2014 12:01:59

Solution 7 - Javascript

Have you seen the Writing directives (short version) section of the documentation?


<div ng-controller="Ctrl2">
      Date format: <input ng-model="format"> <hr/>
      Current time is: <span my-current-time="format"></span>


function Ctrl2($scope) {
  $scope.format = 'M/d/yy h:mm:ss a';

Solution 8 - Javascript

Inside a controller the format can be filtered by injecting $filter.

var date = $filter('date')(new Date(),'MMM dd, yyyy');

Solution 9 - Javascript

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'}}

Solution 10 - Javascript

we can format the date on view side in angular is very easy....please check the below example:

{{dt | date : "dd-MM-yyyy"}}

Solution 11 - Javascript

You can use momentjs to implement date-time filter in angularjs. For example:

 .filter('formatDateTime', function ($filter) {
    return function (date, format) {
        if (date) {
            return moment(Number(date)).format(format || "DD/MM/YYYY h:mm A");
            return "";

Where date is in time stamp format.

Solution 12 - Javascript

Add $filter dependency in controller.

var formatted_datetime = $filter('date')(variable_Containing_time,'yyyy-MM-dd HH:mm:ss Z')

Solution 13 - Javascript

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.


All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionbsrView Question on Stackoverflow
Solution 1 - JavascriptGloopyView Answer on Stackoverflow
Solution 2 - JavascriptDavid SoutherView Answer on Stackoverflow
Solution 3 - JavascriptJim WooleyView Answer on Stackoverflow
Solution 4 - JavascriptCodeOverRideView Answer on Stackoverflow
Solution 5 - JavascriptCharlie MartinView Answer on Stackoverflow
Solution 6 - JavascriptJames LawrukView Answer on Stackoverflow
Solution 7 - JavascriptChaseView Answer on Stackoverflow
Solution 8 - JavascriptTjsView Answer on Stackoverflow
Solution 9 - Javascriptshani singhView Answer on Stackoverflow
Solution 10 - JavascriptRajat-SystematixView Answer on Stackoverflow
Solution 11 - JavascriptRubi sainiView Answer on Stackoverflow
Solution 12 - JavascriptAniket BView Answer on Stackoverflow
Solution 13 - JavascriptRahul TokaseView Answer on Stackoverflow