Receive AngularJS time data from a server in GMT and display it on your local computer's date

Question

Receive AngularJS time data from a server in GMT and display it on your local computer's date

After receiving a response from a service, the date returned is in GMT format. However, I need to convert this date to my local time and display it as 5-22-2016. The problem arises when trying to change the time to match my local computer.

The response structure is as follows:

createdDate: "2016-04-22 16:48 PM GMT"
description: "File Upload Success"
fileGuid:"62e7250c-d5ed-41e2-b5b2-4600094d9a7c"
fileSize:"191429"

There are a total of 90 objects in my array, and I am attempting to use the _each function to iterate through all key-value pairs:

_.each(data, function(value, key) {
    console.log(key, value);
    var strDateTime = value.createdDate;
    var myDate = new Date(strDateTime);
    data[key].createdDate = (myDate.toLocaleString()).split(',')[0];
    console.log("data", data)

Despite this approach working for some created dates, there are instances where it returns an invalid result. Any suggestions on how to resolve this issue?

javascript angularjs date lodash

Answer 1

Answer №1

Upon reviewing the guidelines outlined in ECMA-262 5.1 15.9.1.15 Date Time String Format, it appears that some of your data may not be in the correct format.

It should be noted that ECMAScript has established a standardized string format for date-times, which is a simplified version of the ISO 8601 Extended Format. The prescribed format is: YYYY-MM-DDTHH:mm:ss.sssZ.

To address this issue, consider utilizing the versatile moment.js library.

By incorporating moment.js into your code, you can make the necessary updates as shown below:

moment('2016-5-5').toLocaleString() //'Tue May 05 2015 00:00:00 GMT+0800'

Furthermore, if your objective is solely display-related, you may want to explore an Angular directive alternative known as angular-moment.

Hopefully, these suggestions prove useful. :)

I appreciate the observation brought to my attention by @RobG, prompting me to update MDN references with ECMA-262 standards.

Regarding the input

moment("2016-04-22 16:48 PM GMT")

, you can refer to the accompanying image by clicking on the link provided below:

https://i.sstatic.net/UUUrA.jpg

Answer 2

Upon reviewing the guidelines outlined in ECMA-262 5.1 15.9.1.15 Date Time String Format, it appears that some of your data may not be in the correct format.

It should be noted that ECMAScript has established a standardized string format for date-times, which is a simplified version of the ISO 8601 Extended Format. The prescribed format is: YYYY-MM-DDTHH:mm:ss.sssZ.

To address this issue, consider utilizing the versatile moment.js library.

By incorporating moment.js into your code, you can make the necessary updates as shown below:

moment('2016-5-5').toLocaleString() //'Tue May 05 2015 00:00:00 GMT+0800'

Furthermore, if your objective is solely display-related, you may want to explore an Angular directive alternative known as angular-moment.

Hopefully, these suggestions prove useful. :)

I appreciate the observation brought to my attention by @RobG, prompting me to update MDN references with ECMA-262 standards.

Regarding the input

moment("2016-04-22 16:48 PM GMT")

, you can refer to the accompanying image by clicking on the link provided below:

https://i.sstatic.net/UUUrA.jpg

Answer 3

Answer №2

It is recommended to manually parse date strings as it can be easily done with a custom parsing function if the format is consistent.

If your dates are always in GMT and follow the format '2016-04-22 16:48 PM GMT', you can consider using a function like the one provided below.

If you need the output string in a specific format, you can either use toISOString, which gives an ISO 8601 format with GMT time zone, or create your own formatting function to get the desired output.

var s = '2016-04-22 16:48 PM GMT';

// Function to parse a string into Date object
function parseSpecial(s) {
  var b = s.split(/[-\s:]/);
  var h = (b[3]%12) + (/pm/i.test(s)? 12: 0);
  return new Date(Date.UTC(b[0], b[1]-1, b[2], h, b[4]));
}

// Function to format a date into mm/dd/yyyy hh:ss a format
function myFormat(date) {
  function z(n){return (n<10?'0':'') + n}
  var h  = date.getHours();
  var ap = h > 11? 'pm' : 'am';
  h = h%12 || 12;
  return z(date.getMonth() + 1) + '/' + z(date.getDate()) + '/' +
         date.getFullYear() + ' ' + z(h) + ':' + z(date.getMinutes()) +
         ' ' + ap;
}

var d = parseSpecial(s);

document.write(s +   // Original string
          '<br>' + d.toISOString() +  // As ISO 9601 long format string
          '<br>' + myFormat(d)        // As local date and time
          + ' (your local date and time equivalent)');

You can opt for a library to handle all of this, but it's entirely up to you. For instance, with moment.js, you could achieve the same functionality with:

// Parse the string, specifying the format
var s = '2016-04-22 16:48 PM GMT';
var d = moment(s.replace('GMT','Z'), 'YYYY-MM-DD hh:mm a Z');

// Generate a string representing local time in the required format
console.log(d.format('DD/MM/YYYY hh:mm a'));

Answer 4

It is recommended to manually parse date strings as it can be easily done with a custom parsing function if the format is consistent.

If your dates are always in GMT and follow the format '2016-04-22 16:48 PM GMT', you can consider using a function like the one provided below.

If you need the output string in a specific format, you can either use toISOString, which gives an ISO 8601 format with GMT time zone, or create your own formatting function to get the desired output.

var s = '2016-04-22 16:48 PM GMT';

// Function to parse a string into Date object
function parseSpecial(s) {
  var b = s.split(/[-\s:]/);
  var h = (b[3]%12) + (/pm/i.test(s)? 12: 0);
  return new Date(Date.UTC(b[0], b[1]-1, b[2], h, b[4]));
}

// Function to format a date into mm/dd/yyyy hh:ss a format
function myFormat(date) {
  function z(n){return (n<10?'0':'') + n}
  var h  = date.getHours();
  var ap = h > 11? 'pm' : 'am';
  h = h%12 || 12;
  return z(date.getMonth() + 1) + '/' + z(date.getDate()) + '/' +
         date.getFullYear() + ' ' + z(h) + ':' + z(date.getMinutes()) +
         ' ' + ap;
}

var d = parseSpecial(s);

document.write(s +   // Original string
          '<br>' + d.toISOString() +  // As ISO 9601 long format string
          '<br>' + myFormat(d)        // As local date and time
          + ' (your local date and time equivalent)');

You can opt for a library to handle all of this, but it's entirely up to you. For instance, with moment.js, you could achieve the same functionality with:

// Parse the string, specifying the format
var s = '2016-04-22 16:48 PM GMT';
var d = moment(s.replace('GMT','Z'), 'YYYY-MM-DD hh:mm a Z');

// Generate a string representing local time in the required format
console.log(d.format('DD/MM/YYYY hh:mm a'));

Receive AngularJS time data from a server in GMT and display it on your local computer's date

Answer №1

Answer №2

Similar questions

Alter the button's color seamlessly while staying on the same page

JavaScript Date behaving oddly

Delving into the intricacies of Promises/A+ and the mechanics of Asynchronicity in Javascript

Having trouble accessing functions within the webpack bundle

What is the best way to submit a Redux Form only if there have been changes made to any of the fields

Using ngmodel in Angular to assign a value to the Angular Material datepicker

I am encountering a problem while performing JavaScript validations

Navigating to the end of a kendo list view control

Pause the jquery script when a key is pressed

Steps for converting a file with JSON objects to a JSON array

Swaying while navigating through volumetric fixed step raymarching

Tips for extracting data from a PHP loop and displaying it in a div element

Storing Dark Mode Preference in Local Storage using JavaScript

JSON Novice - persistently storing data in JSON during browser refreshes

Reformat a JSON file and save as a new file

Facing issues with Typescript imports for validatorjs?

Creating an event listener to conceal a popup with a click

Utilizing HTML Entities in jQuery

Issues arise when Angular and Jasmine are unable to inject a controller

Is it possible to trim a video using HTML code?