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

<input ui-date ui-date-format="mm/dd/yyyy" ng-model="valueofdate" /> 

<input type="date" ng-model="valueofdate" />

Answer 1

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'
<p ng-bind="date | date:'MM/dd/yyyy'"></p>

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

Answer 2

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:

<label ng-bind="formatDate(date) |  date:'MM/dd/yyyy'"></label>

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

Answer 3

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

Answer 4

This isn't really exactly what you are asking for - but you could try creating a date input field in html something like:

<input type="date" ng-model="myDate" />

Then to print this on the page you would use:

<span ng-bind="convertToDate(myDate) | date:'medium'"></span>

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!

Answer 5

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.

Answer 6

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

Answer 7

see angular date api : AngularJS API: date

---

The Angular - date filter:

Usage:

{{ date_expression | date  [: 'format']  [: 'timezone' ] }}

Exampe:

Code:

 <span>{{ '1288323623006' | date:'MM/dd/yyyy' }}</span>

Result:

10/29/2010

Answer 8

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

Answer 9

After looking at all the above solutions, the following was the quickest solution for me. If you are using angular-material:

 <md-datepicker ng-model="member.reg_date" md-placeholder="Enter date"></md-datepicker>

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

Answer 10

var app=angular.module('myApp',[]);
        app.controller('myController',function($scope){         
              $scope.names = ['1288323623006','1388323623006'];

        });

Here Controller name is "myController" and app name is "myApp".

<div ng-app="myApp" ng-controller="myController">
        <ul>
            <li ng-repeat="x in names">
                {{x | date:'mm-dd-yyyy'}}

            </li>

        </ul>
    </div>

Result will look like this :- * 10-29-2010 * 01-03-2013

Answer 11

{{convertToDate  | date :  dateformat}}                                             
$rootScope.dateFormat = 'MM/dd/yyyy';

Answer 12

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.

<input ui-date="dateOptions" ui-date-format="mm/dd/yyyy" ng-model="valueofdate" />

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

Answer 13

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);

<input ui-date ui-date-format="mm/dd/yyyy" ng-model="valueofdate" />
<input type="date" ng-model="valueofdate" />

Link to PHP for date formats: http://www.w3schools.com/php/func_date_date_format.asp.

Answer 14

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

Answer 15

// $scope.dateField="value" in ctrl
<div ng-bind="dateField | date:'MM/dd/yyyy'"></div>