How to dispaly Json Formatted DateTime into Angular Data - angularjs

I have Datetime in my sqldb when im fetching data from database using Json formatted im Getting Datetime as a "/Date(820434600000)/"
Here im having some code which i copied from stackoverflow but not working please Guide me
app.filter("DateFilter", function () {
var re = /\/Date\(([0-9]*)\)\//;
return function (x) {
var m = x.match(re);
if (m) return new Date(parseInt(m[1]));
else return null;
};
});
<td>{{eee.DataofJoin | DateFilter | date: 'yyyy-MM-dd HH:mm'}}</td>

So you are getting from database a instance of Date object, so if you bind the
date to new Date got from DB as follows:
$scope.date = new Date(820434600000);
(will result in this "1995-12-31T18:30:00.000Z") and using angular filters for date you can display in any format you want;
In HTML you do this:
<p>{{date | date: 'yyyy-MM-dd HH:mm'}}</p>
This will result in displaying
1995-12-31 20:30
Angular takes care of that with built-in filters, no need for custom one. Though it's not best practice what you do, try using only the timestamp stored in DB.

Related

Get the Date from DateTime object String in JSON response from backend

I am working on a React JS project where my state is getting updated with date object string from the backend JSON response. I am getting a Date Time object in form of a string which looks like this:
createDateTime: "2022-02-08T14:17:44"
The "createDateTime" object is assigned to my react js state, but when I show that updated state in the Browser UI, I get this:
2022-02-08T14:17:44
I want to display just the date, not the time stamp that comes along with the JSON string response. Is there any method that I can use to display just the Date?
2022-02-08
I would create some helpers to show exactly what you need. How about something like this?
function DateTimeParser(date?: string) {
if (date === undefined) return date;
const dateTime = new Date(date);
const parsedDate = `${dateTime.getDate()} ${
dateTime.getMonth()
} ${dateTime.getFullYear()}`;
return parsedDate;
You can amend this to show exactly what you need.
Calling toLocaleDateString on your date value should get the result you want but first of all, you will need to parse the date you get from the server:
const parsedDate = new Date(responseDate)
const date = parsedDate.toLocaleDateString()
You can optionally pass to toLocaleDateString() the desired locale (in case you want to get the date in the format which differs from your local one)

Calendar 2 ionic

I have a calendar on my ionic app and there is an API that brings me events from database.
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://portalemme2.com.br/SaoJoseAPI/agenda', true);
this.http.get('http://portalemme2.com.br/SaoJoseAPI/agenda').map(res => res.json()).subscribe(vetor => {
this.eventos = vetor.eventos;
});
How can I change the date format to appear on calendar?
Every event has an date like '2018-01-01' and an hour like '01:00:00.0000000' (from database)
But the calendar from ionic only accepts date in this format '2017-12-16 01:00:00'
I need to transform all dates to push in "this.eventos" array.
You can use moment.js, an excellent and easy to use library to manipulate dates. You should use data returned from the server to construct a Moment object pasing them to the moment() function and then, use format method to convert date to the format required by Calendar. In your case, to convert to these format, you should pass to format method something like "YYYY-MM-DD HH:MM:SS".

How to get local date with Timezone(EDT/PST) in Angular JS using moment?

I want the current local(to browser) date with Time zone in the following format:
26-Apr-2016 15:56:18 EDT
I have tried using moment.js but it shows date with timezone like GMT -04:00. Also tried this, but it didn't help.
var dateDDMMMYYYYFormate = $filter('date')(new Date(input), 'dd-MMM-yyyy HH:mm:ss');
var dateWithUtc = moment.utc(dateDDMMMYYYYFormate);
var localDate = moment(dateWithUtc).local();
Any help is appreciated.
Since new Date() creates a JavaScript date object, you want to change the moment object into a date object:
var localDate = moment().toDate();

create date object from string in angualrjs

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.

AngularJS date filter working on Chrome but not on Firefox

I have a web page calling some PHP api and rendering results.
PHP queries a MySQL database and returns JSON objects that are deserialized and formatted using AngularJS directives and filters.
Problem rises as MySql dates are not directly supported by AngularJS date filter.
So I wrote this
angular.module(...)
.filter('mysqlDateToISO', function() {
return function(input) {
input = new Date(input).toISOString();
return input;
};
});
and HTML part looks like
<p>
Pubblicato il
{{arg.pubblicato_il | mysqlDateToISO
| date:"dd MMM yyyy 'alle ore' HH:mm:ss"}}
</p>
Chrome renders results properly:
Pubblicato il 25 Mar 2015 alle ore 16:01:00
Firefox instead does not:
Pubblicato il {{arg.pubblicato_il | mysqlDateToISO | date:"dd MMM yyyy
'alle ore' HH:mm:ss"}}
Firefox console shows this error
RangeError: invalid date
The error is raised from input = new Date(input).toISOString()
How can I fix it?
You could use an alternative way to parse date string, such as Moment : http://momentjs.com/ by specifying the mysql date string format, then providing the output format.
Here is an example :
moment("20111031", "YYYYMMDD").format("dd MMM YYYY [alle ore] HH:mm:ss")
Replace 20111031 with the mysql date serialization and YYYMMDD by the mysql date format.
Using moment will help to be more agnostic to browser Date implementation
More complete example :
angular.module(...)
.filter('mysqlDateToISO', function() {
return function(input) {
var result = moment(input, "YYYY-MM-DD HH:mm:ss")
.format("DD MMMM YYYY [alle ore] HH:mm:ss");
return result;
};
});

Resources