My date from the database table looks like this:
"2017-12-07 14:42:38.0611177 +00:00"
I'm trying to format it in my HTML like this:
<td>{{ note.CreatedAt | date : "MMM d, y" }}</td>
I was expecting the date to look like this:
Dec 7, 2017
But, the result looks like this:
Can someone show me what I'm doing wrong?
You have to convert your date as a timestamp before filter it.
Aleksey remark is a good point, you can get timestamp from controller:
angular.module('app').controller('dateCtrl', ['$scope', function($scope){
var date = "2017-12-07 14:42:38.0611177 +00:00";
$scope.createdAt = new Date(date).valueOf();
}]);
And use it in your view:
<span>{{createdAt | date : "MMM d, y"}}</span>
Top example will output: Dec 7, 2017
Plunker Demo
For more informations, refer to AngularJS documentation concerning [date filter].2
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
I have the following date being returned from my datepicker:
Date {Thu Oct 22 2015 00:00:00 GMT+0000 (GMT Standard Time)}
I am trying to use angularjs's $filter to format it the way i want but it does not appear to be working, is there a way around this?:
$filter('date')(new Date($scope.form.date + ' ' + ticket.departure_time, "mediumDate"));
You'll need to use the date formatting strings to convert the Date object to your desired format. Here's how to do that with Angular's $filter:
$filter('date')(new Date($scope.form.date), 'mediumDate');
Ended up having to download and integrate DateJS. I then did this to achieve what i wanted:
var ticket_date = Date.parse($scope.form.date).toString('MMM dd, yyyy');
var ticket_time = Date.parse(ticket.departure_time).toString('hh:mm tt');
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);
}
I am using bootstrap-datetimepicker and using ISO8601 datetime format as yyyy-mm-ddThh:ii:ssZ as mentioned in their options section
In my controller, I do
transaction.date = $('.form_datetime input').val();
which sends the data to backend as (console.log)
created_on: "Wed, 08 May 2013 23:18:32 -0000"
and saves in database as
2013-05-08 16:18:32-07
In my template, I do
<td>{{ transaction.created_on | date:'medium'}}</td>
and I see the output on my HTML as
Wed, 08 May 2013 23:18:32 -0000
But as per the Angular doc, it should be for format Oct 28, 2010 8:40:23 PM
What is that I am missing?
I don't understand why no one provided the simple answer of using the correct format in the filter?
{{item.date | date:'yyyy-MM-ddTHH:mm:ssZ'}}
That will format as ISO-8601
For now, I have created a filter
angular.module('customFilters', []).
filter('dateInMillis', function() {
return function(dateString) {
return Date.parse(dateString);
};
});
added as dependency in app.js as
var app = angular.module('myApp', [
'$strap.directives', 'ngCookies', 'categoryServices', 'transactionServices',
'customFilters'
]);
and in HTML used it as
<!-- added dateInMillis to pass to date to filter Angular way -->
<td>{{ transaction.created_on | dateInMillis | date: 'medium'}}</td>
and that presents date on HTML as
May 8, 2013 5:14:36 PM
If you know a better idea, please let me know
In Brazil (and most of Europe, Australia, etc.), we use the default MySQL DATETIME on DB's:
"Y-m-d HH:ii:ss"
But use date() to display it like this:
"d/m/Y HH:ii:ss"
So in order to display that date in angular, "correctly", create a filter:
var app = angular.module(...
// Converts MySQL datetime into readable BR format
/*
Converts 2013-10-18 18:47:15 into 1382122035000 so angular can format date
using brazilian standards
*/
app.filter('brDateFilter', function() {
return function(dateSTR) {
var o = dateSTR.replace(/-/g, "/"); // Replaces hyphens with slashes
return Date.parse(o + " -0000"); // No TZ subtraction on this sample
}
});
Then, on your angular app, just call the filter and format the value for display:
{{ item.datetime_value | brDateFilter | date:"dd/MM/yyyy HH:mm" }}
That covers date format in Brazilian, UK, New Zealand, etc. date format for angular, just subtract the timezone correctly.
Beside all this, just you have change like this,
<td>{{ transaction.created_on | date:'medium'}}</td>
try to wirte it as
<td>{{ transaction.created_on | date:'MMM d, y h:mm:ss a'}}</td>