How to format the date in angularJS? - angularjs

I retrieve the data from MongoDB,and it contains date, but the date is String format.
I'm trying to use following codes to format the date:
var str = data.date;// assume that is 2002/2/2
var date = new Date(str);
console.log(date);
However the output is :Sat Feb 02 2002 00:00:00 GMT+1100 (AEDT)
How can I make the output become the YYYY/MM/DD?
Many thanks .

You can easily use a date filter do that in your HTML Template:
{{date | date: 'YYYY/MM/DD'}}
Change your controller code to:
var str = data.date;
$scope.date = new Date(str);
so that 'date' can be binded to the HTML template as explained.

Related

Format date in angularJS

I have a date in this format "2017-06-26 10:21:25.88785". My purpose is to show this kind of format 'dd/MM/yyyy hh:mm:ss', and put this date into a ng-table. So, I write in my ng-table
{{::fondo.aggTms | date:'dd/MM/yyyy hh:mm:ss'}}
Where fondo is my variable and aggTms is the attribute of the main variable.
Unfortunately, it doesn't work, and in my table is shown the first (wrong) format.
Anyone could help me?
You can try rounding of last seconds part Then covert it into date & then try the angular filter. the function to be called in place of fondo.aggTms is
$scope.toDate = function(date){
var res = date.split(":");
var last = window.Math.round(res[2]);
var datestring = res[0]+':'+res[1]+':'+last;
var d = new Date(datestring);
return d;
}
{{::toDate(fondo.aggTms) | date:'dd/MM/yyyy HH:mm:ss'}}
This is the working plunker link: https://plnkr.co/edit/7OHqUmxnjfs89mCMCF3M?p=preview
Now this's only valid if you're considering that last part as seconds in decimal.

Getting AngularUI Bootstrap datepicker to recognize YYYYMMDD format?

We have legacy birth date data in the format of YYYYMMDD (20151022). Angular and the ui-bootstrap datepicker obviously don't like this format. Also, our new UI requirements are to display the format as MMM, d YYYY (Oct, 22 2015). I'm not seeing a way to enforce a non-standard date format (for data, not for display) in the documentation. Is this not supported or am I just overlooking it?
I assume your datepicker is bound to a variable - ng-model="date". Then simply $watch this variable and do the nessecary formatting when a string is assigned to it :
$scope.date = '';
$scope.$watch('date', function(newValue, oldValue) {
if (typeof newValue == 'string') {
var tempDate = new Date(
newValue.substr(4,2)+'-'+
newValue.substr(6,2)+'-'+
newValue.substr(0,4)
);
$scope.date = !isNaN(tempDate.getTime()) ? tempDate : new Date();
}
})
This will return a valid date object if you have assigned a string to date on the format yyyymmdd; if something has gone wrong date will be set to today.
$scope.date = '20151022'; //set the datepicker to 10-22-2015
$scope.date = new Date('01-01-1900') //etc works as usual
In order to use a display format on the form Oct, 22 2015 you are almost right, it should just be lowercase y's :
uib-datepicker-popup="MMM, d yyyy"
the above in a plnkr -> http://plnkr.co/edit/ne60bBaTuca7wajTHP9w?p=preview

Convert milli seconds into Date in DD/MM/YYYY format in angularjs

I have written a service which returns date in milliseconds , but I want to show it in format 'DD/MM/YYYY' , how can it be done?
use a date filter and specify format, for example:
{{date_in_milliseconds | date:'dd/MM/yyyy'}}
var date = new Date(1324339200000);
date.toString("MMM dd"); // "Dec 20"
time: any;
date: any;
calculateDate() {
let milliSeconds = new Date().getTime();
let date = new Date(milliSeconds);
this.time = date.toLocaleTimeString();
this.date = date.toLocaleDateString();
console.log('time', this.time, this.date);
};
You can use date filter.
But I love MomentJS with own Angular filter.
In Angular 2:
var date = new Date(parseInt(1495777991000)); //datetime in IST
var time= date.toLocaleTimeString() //retrieve time Fri May 26 2017 11:23:11
console.log(time) //11:23:11
You can also use pipe in angularjs. You can write following code in html file
{{date|date:'date format'}}

AngularJS | date filter does not seem to be changing the way my date displays at all

I have the following in my HTML:
{{ row.createdDate }}
The date for this is coming from JSON and looks like this: "createdDate=13-08-2013 03:02"
This creates a date: "13-08-2013 03:27"
I changed this to:
{{ row.createdDate | date:'MM/dd/yy HH:mm' }}
Still it creates the same date: "13-08-2013 03:27"
It seems that the date filter is not doing anything for me. Is the problem that the date filter requires the date to be in a specific format and if so what format should my date be in. Here is the format that I am currently using with MS Web API:
json.SerializerSettings.Converters.Add(
new IsoDateTimeConverter { DateTimeFormat = "dd-MM-yyyy hh:mm" });
This may be someting to do with the datatype of row.createdDate. I think you need to use date type variable expression, as:
First, in controller, you can add one more function to get date type variable from your string type variable, as
$scope.GetCreateDate = function () {
return new Date(row.createdDate);
};
and then use that date type variable in your binding expression, as:
{{ row.GetCreateDate | date:'MM/dd/yy HH:mm' }}
I took Sanjeev's answer combined it with Convert a mySQL date to Javascript date and made a more generic version of it.
Put this in your controller:
$scope.toJsDate = function(str){
if(!str)return null;
var t = str.split(/[- :]/);
var d = new Date(t[0], t[1]-1, t[2], t[3], t[4], t[5]);
return d;
}
And put this in your HTML:
{{toJsDate('2013-09-19 02:23:51') | date:'MM/dd/yyyy # h:mma'}}
Another option is to use a filter like: AngularJS: How to format ISO8601 date format?

Why does angular date filter adding 2 to hour?

I've created a duration timer in angular js, using angular 'date' filter.
For some reason, the hour part starting with '2' instead of '0'.
I'm using the filter like this
{{runningDuration | date:'HH:mm:ss'}}
http://jsfiddle.net/rpg2kill/vNdpu/
What am I doing wrong?
It's because you want to format a date but pass it a difference between dates as an integer. Angular then assumes you want new Date(runningDuration).
You can use a filter to convert the date to utc(this probably requires more corner case handling than just number and date). Demo
JS
myApp.filter('utc', [function() {
return function(date) {
if(angular.isNumber(date)) {
date = new Date(date);
}
return new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
}
} ]);
HTML
{{runningDuration | utc | date:'HH:mm:ss'}}

Resources