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\
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 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'}}
I need one help.i need to generate date time format like php generates using method date("YmdHis") using Angular.js or Javascript.Please help me to do this.
In a controller:
$scope.timestamp = new Date;
In the view:
{{ timestamp | date: 'yyyyMMddHHmmss' }}
See https://docs.angularjs.org/api/ng/filter/date.
Today I found that's it's not working to convert for a date inside angular expression.
So I just making something like
<th>{{new Date(elem.timestamp}}</th>
But it fails with internal angular error.
So why it's not possible to cast to Date inside angular expression?
Because angular expressions do not accept arbitrary Javascript code, including creating new objects. What you are looking for is called angular filters, they were specifically designed for this case.
So instead of
{{new Date(elem.timestamp)}}
you should write
{{elem.timestamp | date: 'yyyy-MM-dd'}}
More info on the date filter can be found here. More on filters, in general, can be found here.
If you are dealing with Firebase Timestamp object (https://firebase.google.com/docs/reference/android/com/google/firebase/Timestamp), you can use:
{{elem.timestamp.seconds*1000 | date}}
Just an extention of what #package mentioned we can also go to hour-second as well from millisecond, the format can be any pattern as well
< th >{{elem.timestamp | date: 'yyyy/MM/dd h:mm:ss a'}}< /th >
Dealing with Firebase timestamp I use :
{{ element.seconds * 1000| date:'short' }}
It is probably best to use a library like moment for this. Also the functionality you are looking for is meant to be implemented via "filters"
Also see angular-moment
When the timestamp is in milliseconds:
Only Date:
{{elem.timestamp | date: 'yyyy-MM-dd'}}
Date & Time:
{{elem.timestamp | date: 'yyyy/MM/dd hh:mm:ss a'}}
Date & Time(24-hr format):
{{elem.timestamp | date: 'yyyy/MM/dd HH:mm:ss'}}
When your timestamp is in seconds, then just multiply with 1000:
{{elem.timestamp*1000 | date: 'yyyy/MM/dd HH:mm:ss'}}
It's working to convert for a date inside an Angular expression.
So I just making something like:
{{elem.timestamp | date: 'yyyy-MM-dd'}}