Category: AngularJS

Angular Interceptor for Converting UTC date time into Local date time

Angular Interceptor for Converting UTC date time into Local date time

Hi Everyone recently I have a requirement in which we have to convert every date time attributes of  AJAX response into local date time because response date time attributes in UTC but we wanted in local date time.

It is always good to save all our date time information into UTC format on server because using of UTC format we can calculate local date time easily with just knowing user timezone.

E.g. In our database we saved date in UTC format that is 2016-05-29 00:00:00(UTC) but we want to show this according to user timezone like for India timezone user that is 2016-05-29 05:30:00(GMT+5:30).

For achieving this I wrote a angular interceptor that runs on every AJAX request and check every AJAX response that have a valid date time attributes then converted  into local.

Let’s start with creating a new angular factory and use into our app.js config section.

1.Add a new JavaScript namespace that contains important function

//Namespace
var dateUTC = {};
dateUTC.checkNested = function (prop, val1) {
//check for string
if (typeof (val1[prop]) == “string”) {
if (isNaN(val1[prop])) {
if (dateUTC.checkISOdate(val1[prop])) {
val1[prop] = moment(moment.utc(val1[prop]).toDate()).format();
}
}
}
//check for object
if (typeof (val1[prop]) == “object”) {
//start loop for array
for (var prp in val1[prop]) {
if (typeof (val1[prop][prp]) == “string”) {
if (dateUTC.checkISOdate(val1[prop][prp])) {
val1[prop][prp] = moment(moment.utc(val1[prop][prp]).toDate()).format();
}
}
if (typeof (val1[prop][prp]) == “object”) {
//start loop for nested object
for (var pr in val1[prop][prp]) {
if (typeof (val1[prop][prp][pr]) == “string”) {
if (isNaN(val1[prop][prp][pr])) {
if (dateUTC.checkISOdate(val1[prop][prp][pr])) {
val1[prop][prp][pr] = moment(moment.utc(val1[prop][prp][pr]).toDate()).format();
}
}
}
if (typeof (val1[prop][prp][pr]) == “object”) {
for (var p in val1[prop][prp][pr]) {
dateUTC.checkNested(p, val1[prop][prp][pr]);
}
}
}
}
}
}
};
dateUTC.checkISOdate = function (date) {
if (moment(date, “YYYY-MM-DDTHH:mm:ss.SSS”, true).isValid()
|| moment(date, “YYYY-MM-DDTHH:mm:ss.SS”, true).isValid()
|| moment(date, “YYYY-MM-DDTHH:mm:ss.S”, true).isValid()
|| moment(date, “YYYY-MM-DDTHH:mm:ss”, true).isValid()) {
return true;
}
return false;
}

2.Create a new factory that intercept on every AJAX request

Myservice.factory(‘dateinterceptor’, function () {
return {
request: function (config) {
return config;
},

requestError: function (config) {
return config;
},

response: function (res) {
if (typeof (res.data) == “object”) {
if (res.data) {
if (res.data.length) {
angular.forEach(res.data, function (val, key) {
if (typeof (val) == “object”) {
if (val) {
if (val.length) {
angular.forEach(val, function (val1, key1) {
for (var prop in val1) {
dateUTC.checkNested(prop, val1);
}
})
}
else {
for (var prop in val) {
dateUTC.checkNested(prop, val);
}
}
}
}
})
}
else {
for (var prop in res.data) {
dateUTC.checkNested(prop, res.data);
}
}
}
}
return res;
},

responseError: function (res) {
return res;
},

}
});

3.Add our date interceptor factory appModule.config section

appModule.config([‘$httpProvider’, function ( $httpProvider) {
$httpProvider.interceptors.push(‘dateintercepter’);
}]);

Thanks for vising my blog.

Hope it’ll help someone.