I have a ng-repeat that display the following expression
{{date}} // 2-1-2017
When I use angular-moment
{{date | amDateFormat:'DD'}}
I got 1, which I'm expecting 2. how to make moment know my format is actually dd-mm-yyyy not mm-dd-yyy in the view? I don't want to parse it at my controllers level as it's complicated.
According to the docs, AngularJs has a built-in filter for date which can be used with the following set:
{{ date_expression | date : format : timezone}}
So that you can use it like:
{{ date | date:'dd-MM-yyyy'}}
However if you use moment's date filter, it has to be a moment date (i.e., complete date with timezone defined) object and you can filter it in the same way that angular does.
{{ date | amDateFormat:'dd-MM-yyyy' }}
You can use angular built-in filter for date (as suggested in other answers), if your input is:
a JavaScript Date object
a number that represents milliseconds (this can be also a string)
a string in ISO 8601 format (e.g. yyyy-MM-ddTHH:mm:ss.sssZ, yyyy-MM-dd etc)
Your date is a string with a format that is not ISO 8601, so you have to change the way you parse 2-1-2017 into a date.
You can parse your string in your controller using moment(String, String) as shown in the following example:
angular.module('MyApp',['angularMoment'])
.controller('AppCtrl', function($scope) {
$scope.dates = [
// Wrong way to parse string
moment('2-1-2017').toDate(),
// Parse string specifying format
moment('2-1-2017', 'D-M-YYYY').toDate()
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-moment/1.0.1/angular-moment.min.js"></script>
<div ng-app="MyApp" ng-controller="AppCtrl">
<div ng-repeat="date in dates">
<span>angular-moment: {{date | amDateFormat:'DD'}}</span>
<span>angular date filter: {{date | date:"dd"}}</span>
</div>
</div>
If you don't want to modify your controller you can use angular moment amParse filter. As the docs says, this filter:
Parses a custom-formatted date into a moment object that can be used with the am-time-ago directive and the other filters.
So in your case, you can use the code shown in the following example:
angular.module('MyApp',['angularMoment'])
.controller('AppCtrl', function($scope) {
$scope.dates = [
'2-1-2017', // February 2 2017
'15-1-2017' // January 15 2017
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-moment/1.0.1/angular-moment.min.js"></script>
<div ng-app="MyApp" ng-controller="AppCtrl">
<div ng-repeat="date in dates">
<span>angular-moment: {{date | amParse:'D-M-YYYY' | amDateFormat:'DD'}}</span>
</div>
</div>
I think your problem could be related in how you build your date object
new Date("2-1-2017") ; // Wed Feb 01 2017
If I do this, 1 refers to the day, which is correct.
The date filter parse the date based on the object it receive, you should look for a correct Date format for your input date.
You should use the angular filter, like:
{{date | date:'dd-MM-yyyy'}}
Related
I have a problem with the handling of dates in angular 8.
I have an api rest with symfony4 (apiPlatform) and it returns the dates with this format
"balanceDate": "2010-10-04T00:00:00+00:00"
If I pass it to my template without the applied Date pipe it puts exactly the same text
2010-10-04T00:00:00+00:00
when I use the pipe as follows in angular
{{ balanceDate | date:'dd-MM-yyyy' }}
The date is represented with one day less
I have been doing tests, I manually added the date to the pipe and I was deleting parts of the date
{{ '2010-10-04T00:00:00+00:00' | date:'dd-MM-yyyy' }} - Fail
{{ '2010-10-04' | date:'dd-MM-yyyy' }} - Correct
{{ '2010-10-04T00:00:00' | date:'dd-MM-yyyy' }} - Correct
So I deduced that this part of the date
+00:00
It is the cause of the problem
I honestly have no idea on which side I should work the date output, whether in Angular or in the symfony api rest.
I hope you can guide me to solve this problem
Thank you
If you know that the date is set as a UTC value ("+00:00" or "Z" for the timezone), you can add the timezone specifier to the date pipe:
date:'dd-MM-yyyy':'UTC'
the solution is to passe the string date to the Object Date of javascript to get a valid Object Date Javascript in the component before to use it on the template:
newdate = new Date('2010-10-04T00:00:00+00:00');
demo: Demo Angular
I have below code in my HTML and using Angular v 1.6.3 along with angular moment picker from https://github.com/indrimuska/angular-moment-picker. I want to display calendar using format DD-MM-YYYY.
<div moment-picker="member.memberSince"
format="DD-MM-YYYY"
max-view="month"
start-view="month"
autoclose="true"
today="true"
ng-model="member.memberSince"
start-date="member.memberSince | date : 'dd-MM-yyyy'">
{{ member.memberSince | date : 'dd-MM-yyyy' || "Select a date" }}
</div>
I have two problems
When I set member.memberSince from JS code on page load, date is
displayed fine e.g. 01-04-2017. But when I select the date from
calendar, it shows the date in undesired format e.g. Sat Apr 01 2017 00:00:00 GMT+0530.
If I don't set member.memberSince, then I
can't see any control on page to select calendar.
How should I solve this problem?
Plunker
There are multiple issues here.
Let's have a look at docs | angular-moment-picker#options first,
moment-picker: Two-way bindable property as formatted datetime string.
ng-model: Two-way bindable property as Moment.js object.
Now, we should not have both set to same property for obvious reasons. If you have provided ng-model with same property, it seem to give precendence to that and sets the property to Moment.js object.
Next, when you have {{memberSince | date : 'dd-MM-yyyy' || "Select a date"}} (where memberSince is set to ng-model), which initially had a string/Date object. But when you select a date, it again becomes Moment.js object which doesn't comply to date:'<my-dateformat>' obviously.
Solution to your problem (if you haven't figured out yet), would be to remove ng-model set to the directive. And you can freely access memberSince from moment-picker="memberSince" since it would be a formatted string in your provided format i.e. DD-MM-YYYY.
And in HTML, you can use {{ memberSince || "Select a date" }} without needing to use Angular's date filter since memberSince is just a string containing your selected date in provided format.
working plunker
The two bindings (ng-modal) of AngularJS are not working on div.
So try something like this:
<div ng-app="myApp" ng-controller="myCtrl">
<div
moment-picker="member.datepicker"
max-view="month"
start-view="month"
format="DD-MM-YYYY"
autoclose="true"
today="true"
>Member Sience
{{ member.datepicker | date:'dd-MM-yyyy' || 'Select a date' }}
</div>
<script>
var app = angular.module('myApp', ['moment-picker']);
app.controller('myCtrl', function($scope) {
$scope.member ={
datepicker:new Date()
}
});
</script>
you can use locale="en" with format="DD-MM-YYYY hh:mm a" , then it will be work
I am struggling with some datetime formating in angularJS.
I would like to obtain the following date format 25/11/1990 14:35
based on a datetime string containing "1990-11-25 14:35:00" without having to create a Date object in the controller.
It seems like angular can only achieve proper datetime formatting if the input is a Date object or if the String does not contain hours or minutes
index.html
<div ng-app ng-controller="Ctrl">
String: {{'1990-11-25 14:35:00' | date:"dd/MM/yyyy HH:mm"}}<br>
string date: {{'1990-11-25' | date:"dd/MM/yyyy"}}<br>
Date: {{myDate | date:"dd/MM/yyyy HH:mm"}}
</div>
controller.js
function Ctrl($scope)
{
$scope.myDate = new Date("1990-11-25 14:35:00");
}
Output
string: 1990-11-25 14:35:00
string date: 25/11/1990
date: 25/11/1990 14:35
http://jsfiddle.net/CkBWL/612/
According to angular's documentation on the date filter,
the only format allowed for datetime string are:
datetime string formats (e.g. yyyy-MM-ddTHH:mm:ss.sssZ and its shorter versions like yyyy-MM-ddTHH:mmZ, yyyy-MM-dd or yyyyMMddTHHmmssZ
Is there so a way to format a string containing "1990-11-25 14:35:00" into 25/11/1990 14:35 directly in the html without having to create a Date object ?
Thanks for your help !
It seems like angular can only achieve proper datetime formatting if the input is a Date object or if the String does not contain hours or minutes
If you want your string recognized as a date you should use the date formatted according to the ISO8601 standard. So 1990-11-25 14:35:00 becomes 1990-11-25T14:35:00Z, you can also include the offset if you want (its in the spec). You can then use the existing date filter built into Angular.
From the date filter documentation on param date
Date to format either as Date object, milliseconds (string or number) or various ISO 8601 datetime string formats (e.g. yyyy-MM-ddTHH:mm:ss.sssZ and its shorter versions like yyyy-MM-ddTHH:mmZ, yyyy-MM-dd or yyyyMMddTHHmmssZ). If no timezone is specified in the string input, the time is considered to be in the local timezone.
Code update
<div ng-app ng-controller="Ctrl">
String: {{'1990-11-25T14:35:00Z' | date:"dd/MM/yyyy HH:mm"}}
<br>
Date: {{date | date:"dd/MM/yyyy HH:mm"}}
</div>
function Ctrl($scope) {
$scope.date = "1990-11-25T14:35:00Z";
}
Updated JsFiddle
Is it possible to convert shortDate format to string? I want to put the format to my label. For example I have a code of <label>{{dateFormat}}</label> then the dateFormat contains the equivalent format of shortDate. Output will be M/d/yy
Yes. Check angularjs date:
<label>{{ dateFormat | date : 'M/d/yy'}}</label>
And here is demo:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="">
<span>{{1443088830219 | date:'M/d/yy'}}</span><br>
</body>
I already found the answer. Angular's service $locale will do the work. $locale.DATETIME_FORMATS.shortDate will display M/d/yy. Thanks! :)
I am displaying date in this format using angular
{{ date }} ,date:\'MM-dd-yyyy HH:MM:ss\
how to display like Jan-dd-yyyy using angular
Is there any dirct way to do using angular js- (Using normal jquery i am able to do)
use Angular filter of date.
{{date | date:'MM-dd-yyyy HH:MM:ss'}}
See the following link.
http://docs.angularjs.org/api/ng.filter:date
Well,
according to the docs, you have a builtin filter in angular, called date:
<p>{{Date.now() | date:'yyyy'}}
would render to:
<p>2013</p>
The yyyyin this case can be any format string documented. In the example you gave, this would be:
{{date | date: 'MMM-dd-yyyy'}} # => "Jan-21-2013" (if date was a date object for this day)
For custom date:
$scope.user.dob = new Date('1980', '12' ,'10'); // controller code
{{user.dob | date : 'MMM-dd-yyyy'}} // Dec-10-1980
For current date:
$scope.user.current= new Date(); // controller code
{{user.current | date : 'MMM-dd-yyyy'}} // Current date in given format
Try this
{{ date }} ,date:\'MMM-dd-yyyy HH:MM:ss\