问题
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\" />
回答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/
回答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
回答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
回答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!
回答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.
回答6:
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
回答7:
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'}}
回答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
回答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);
};
回答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
回答11:
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" })
回答12:
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.
回答13:
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
回答14:
{{convertToDate | date : dateformat}}
$rootScope.dateFormat = 'MM/dd/yyyy';
回答15:
// $scope.dateField="value" in ctrl
<div ng-bind="dateField | date:'MM/dd/yyyy'"></div>
来源：https://stackoverflow.com/questions/22392328/how-to-format-date-in-angularjs