I am trying to filter the date using angular filter in HTML. But it is not working.
Here is my template code:
{{due_date | date:'MM/dd/yy'}}
The input is: {"due_date" : "2015-10-10 16:00:00.000+0000"}
The expected output is: 10/10/15
What mistake am I doing?
It happens becouse due_date is a String instead of a Date object.
You can "convert" it by doing (maybe you should put this into your controller):
var due_date_parsed = new Date(due_date);
parse your date like :
$scope.date = Date.parse(new Date());
in you code
Date.parse(jobDetails.trs_data.due_date)
if string is also in proper date format like '20140313T00:00:00' then this code will work perfectly fine. In other case you will have to convert/parse the string to date type.
Related
i write the following coding to print the current date time
$scope.date = new Date();
and then i print the same using consol.log
console.log($scope.date);
and it is working fine
Tue Jan 24 2017 16:36:06 GMT+0530 (India Standard Time)
but now i want to change the date format and i want to print like
21-12-2016
can anybody help me here?
i used the conversion but i am unable to remember the page or the url of the page right now,
and stuck on this,
before i leave for the home today i thought of solving this issue
In controller you can do
$filter('date')(date, format, timezone)
to change the date format. And in html,
{{ date_expression | date : format : timezone}}
use this.
Like
$scope.formattedDate = $filter('date')($scope.currDate, "dd-MM-yyyy");
to print same on html
{{ currDate | date : "dd-MM-yyyy"}}
https://docs.angularjs.org/api/ng/filter/date
Following formats are supported by angular.
You can do this either in controller or in html page.
$scope.date = new Date();
The first one is :
$scope.date = $filter('date')($scope.date, 'dd-MM-yyyy');
Second one is :
{{date | date:'dd-MM-yyyy'}}
You can use the Angular date filter:
{{date | date: 'dd-MM-yyyy'}}
You can use the in-build js libraries functions i.e getDay(), getHours(), getMinutes(), getMilliseconds(). This functions will return you the corresponding date's individual components values.
e.g
var x = $scope.yourDateModelObj.getHours();
Likewise, you can get the date, month, years values.
return an integer value for hours.
Hope that helps
Why can't I directly use angular.isDate in the Binding. Something like:
{{(angular.isDate(cdate.customStartDate)? cdate.customStartDate | date : format : timezone : 'Please select'}}
You need to expose isDate from the controller.
Like $scope.isDate = angular.isDate
If it isnt on the scope, it cannot be seen by your view.
But like what jsmtslch said, this logic would be better served in the controller. Something along the line of
$scope.isCorrectDate = function (targetDate){return angular.isDate(cdate.CustomStartDate))}
then you can use in your view
{{isCorrectDate(cdate.CustomStartDate) ? cdate.customStarteDate | date: format:timezone :'Please Select'
I have a
As a scope I have: $scope.getDatetime = new Date();
And I wanna make the following work:
<span ng-show="getDatetime > foobar.datetime">Foobar</span>
The foobar.datetime is from ng-repeat with the format of: 2014-08-20 01:45:15
So I only wanna show that element, when current time is bigger then the datetime given.
Thought it was a easy as my example above, but it isn't - and I can't figure out if it's even possible without using plugins.
If I'm reading this correctly, then your issue is that your comparing a string and a date object. Try:
<span ng-show="getDatetime > getDate(foobar.datetime)">Foobar</span>
And in your javascript:
$scope.getDate = function(date) {
return new Date(date);
}
You need to convert your date to a timestamp, then you can compare the 2 dates, perhaps try using a filter to convert to a time stamp.
I am working with angularjs and the angularjs bootstrap ui (http://angular-ui.github.io/bootstrap/).
I want to use the datepicker directive (http://angular-ui.github.io/bootstrap/#/datepicker).
I am getting a string value from a database
2015-07-30 15:10
Angular wants to have a date object as model but I wasnt able to create a date object with that string. the error I get is
Error: [ngModel:datefmt] http://errors.angularjs.org/1.4.3/ngModel/datefmt?p0=2015-07-30
Can anyboy help me create a date object in angular with a string which has this format -> YYYY-MM-DD
more Information:
the string is in my scope
$scope.event.startdate
and I am splitting it in date, hours and minutes.
$scope.startpoint = {
date: $scope.event.startdate.substring(0, 10),
hours: $scope.event.startdate.substring(11, 13),
mins: $scope.event.startdate.substring(14, 16)
};
The database is MongoDB
Thank you
Adrian
You can use use a generic javascript solution. For example, you can use serega386's answer to a similar javascript question:
var st = "26.04.2013";
var pattern = /(\d{2})\.(\d{2})\.(\d{4})/;
var dt = new Date(st.replace(pattern,'$3-$2-$1'));
You can have the below code in your controller
$scope.newDate =new Date($scope.event.startdate);
and below code in your template
{{newDate | date:'yyyy-MM-dd'}}
Ref: AngularJS/javascript converting a date String to date object
If you are getting the date as a single set of numbers like this
1288323623006
you can use the date formatter directly on that.(from angular doc here)
<span ng-non-bindable>{{1288323623006 | date:'medium'}}</span>:
<span>{{1288323623006 | date:'medium'}}</span><br>
<span ng-non-bindable>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>:
<span>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span><br>
Expected result
I hope that solves your problem, let me know if I'm missing something.
Actual Date coming from JSON
Need to format it as below .
Effective Date : 2010-08-31 (trim the time stamp)
End Date : 2010-08-31 (trim the time stamp)
Am using the below code for Formatting the date inside Ng-Repeat.
<li ng-repeat="product in data | startFrom:currentPage*pageSize | limitTo:pageSize"
ng-click="getAttributes(product)">
{{product.prod_start_date| date:'MM/dd/yyyy'}}
{{product.prod_end_date| date:'MM/dd/yyyy'}}
</li>
But it doesnt work still displays the same.
Should the Date be passed as new Date as shown in the below jsfiddle Example
http://jsfiddle.net/southerd/xG2t8/
Note sure how to do that inside ng-repeat.?? Kindly help me on this. Thanks in Advance
I created my own filter to address this.
The date filter cant take a string, needs a date object.
.filter('cmdate', [
'$filter', function($filter) {
return function(input, format) {
return $filter('date')(new Date(input), format);
};
}
]);
then you can do:
{{product.prod_start_date| cmdate:'MM/dd/yyyy'}}
I use moment.js for my UI date time handling (there even a nice angular-moment bower package as well)
http://momentjs.com
https://github.com/urish/angular-moment
usage:
<span>{{product.prod_start_date | amDateFormat:'MM/dd/yyyy'}}</span>
It has a bunch of other options as well with relative dates etc.
I have updated the controller that you showed in the fiddle and here is your updated filter
Here I made use of the $filter('date') which is a feature of Angular itself in order to format the date in the desired format.
Here is the controller:
function Scoper($scope,$filter) {
$scope.s = "2012-10-16T17:57:28.556094Z";
var dateObj = new Date($scope.s);
$scope.dateToShow = $filter('date')(dateObj,'yyyy-MM-dd');
console.log($scope.dateToShow);
}