How to format date in angularjs
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" />
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/
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
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
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!