Tips on changing milliseconds to GMT time with JavaScript

I am currently working on a project where the end date is set for February 12 (or any future date) and I am retrieving information from an API response.

The data obtained from the API response looks like this: {endDateTime:"1518393600000"}

In terms of UTC time and date, this response corresponds to Mon Feb 12 2018 00:00:00

However, when considering local time and date, the response translates to Sun Feb 11 2018 19:00:00 (GMT - 05:00)

My aim is to display the end date as Feb 12, 2018 on the user interface, but due to date conversion based on the local time zone, it shows Feb 11 as the end date. Below is the code snippet I have been using:

var d = new Date();  
var c = d.setTime(parseInt($scope.project.endDateTime));  
$scope.endDateTime = c;

Within the HTML markup:

<div> {{endDateTime}} </div>

I attempted to adjust the code in another way, however, it did not yield the desired outcome:

 var d = new Date($scope.project.endDateTime);
 var c = d.getUTCDate();
 $scope.endDateTime = c;

Despite my efforts to tweak the code in various ways, I haven't been successful. Even after spending hours trying different approaches, I couldn't make it work. It's possible that I might be overlooking something very trivial. Any assistance or guidance on this matter would be highly appreciated! :)

javascriptangularjs

Answer â„–1

After doing some investigation, I came up with a solution. Here is the code snippet along with an explanation:

var d = new Date(parseInt($scope.project.endDateTime));
var c = c.toUTCString();
var endDate= c.split(" ");
$scope.endDateTime = endDate[2] + ' ' + endDate[1] + ',' + ' ' + endDate[3];

Additionally, here is the corresponding HTML structure:

<div> {{endDateTime}}</div>

The issue I encountered was related to parsing the response string from the API. It turns out I missed this crucial step and also used the incorrect method getUTCDate() instead of toUTCString().

In this scenario, for example, when the end date is dynamically set to Feb 12, the API provides back the following data:

project: {endDateTime:"1518393600000"}

By implementing the initial line of code, the parsed string is printed in the console as: Sun Feb 11 2018 19:00:00 GMT-0500 (Eastern Standard Time).

To display the time in GMT format, I utilized the toUTCString() method which resulted in the output: Mon, 12 Feb 2018 00:00:00 GMT after executing console.log(c).

The ultimate goal was to exhibit the date as Feb 12, 2018 on the user interface, hence the splitting logic in the third line. By utilizing console.log(endDate), the split array is displayed as:

["Mon,", "12", "Feb", "2018", "00:00:00", "GMT"]

Based on the outcome of the third line, it became quite simple to showcase the desired date format. Hopefully, this clarifies any confusion.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing caching for ajax JSON requests can improve performance and optimize data

Looking to optimize my basic Ajax call for parsing a JSON file. I want to avoid hitting the feed every time someone visits the page. Any suggestions on how to implement caching so that the feed is only requested, let's say, once every 2 hours? $(fun ...

javascriptjqueryajaxjsoncaching

Slow transition with a gradual appearance and disappearance for the background

I am currently implementing a fading background image effect on my web page, where the current image fades out as the next one fades in. Here is my code: var backgrounds = []; backgrounds[0] = './img/bg.jpg'; backgrounds[1] = '. ...

javascriptjqueryhtmlcss

A guide to saving an ArrayBuffer as a file using JavaScript

I am currently developing a file uploader for the Meteor framework. The approach involves breaking down the file on the client side from an ArrayBuffer into small packets of 4096 bits, which are then sent to the server through a Meteor.method. The abridge ...

javascriptnode.jsfile-uploadmeteorarraybuffer

Perform an Ajax request upon clicking on the dropdown list item

I recently created a drop-down list using some JavaScript code. Here's how I did it: <script> $('.menu').dropit(); </script> <ul class="menu"> <li> <a href="#">Product_name</a> ...

javascriptajaxcodeigniterjquery

Styling Text on Buttons (Using CSS)

I need to modify my button, which contains lengthy text. When the mouse pointer hovers over the button, I would like the long text to wrap into 2 or 3 lines so that more of it is visible. Additionally, I want the remaining text to be displayed with an el ...

cssangularjsangular-material

Monitoring modifications to nested information in Vue.js

I am looking to monitor changes in the 'families' variable, which contains nested objects. <component-test v-for="family of familiesToDisplay" // rest /> data: () => ({ families: [], }), computed: { ...

javascriptjqueryvue.jsvuejs2vue-component

The functionality of res.render() is effective in certain scenarios but not in others

In the code below, I'm curious why res.render('home'); works, but res.render('update'); does not. This code is utilizing Node.js, Express, and Handlebars. directory structure myApp │ ├───app.js │ ├┠...

javascriptnode.jsexpresshandlebars.js

Prefering `window.jQuery` over the yarn version

I am currently in the process of transitioning to Vite 3 with Vite Ruby on Rails from Webpacker and Webpack. One major issue I have encountered is that my system functions as a CMS. Some of our long-standing clients have jQuery code embedded directly withi ...

javascriptjquerynode-modulesvite

When the properties change, React Router Redux does not get rendered

I am encountering a challenge with using react router redux, where everything seems to be working well except for rendering when props change. Index.js import React from 'react'; import ReactDOM from 'react-dom'; import {Provider} fro ...

javascriptreactjsreact-routerreact-router-redux

Slide carousel with Swipe functionality using jQuery and Bootstrap 3

i'm attempting to implement the solution provided in this thread: How to enable mobile left and right swipe on Bootstrap carousel slider However, it is not working for me. Here is my code: <!DOCTYPE html> <html lang="es"> <head> ...

javascriptjqueryhtmltwitter-bootstrap

What is the process for integrating a popup component into a React-Native application?

As a React-Native beginner, I wanted to incorporate a popup window into my app. After some research, I came across this solution: https://www.npmjs.com/package/react-native-popup I followed the first step: npm install react-native-popup --save However, w ...

javascriptreactjsreact-nativecross-platformpopupwindow

Prevent selection of specific weekdays in Javascript

Looking to enhance my calendar functionality in JavaScript by disabling multiple week days. I have successfully disabled Sunday using the code snippet below, which utilizes the getDay() method. Any guidance on how to disable more than one week day with Jav ...

javascript

JavaScript's setTimeout function seems to be malfunctioning

I have implemented a JavaScript function to expand and collapse gridview rows. Below is the script: <script type="text/javascript"> function divexpandcollapse(divname) { var div = document.getElementById(divname); var img = docum ...

javascriptasp.netgridview

The three.js library encountered an ERROR 404 ( File Not Found ) when trying to import an existing file

Error: GET http://localhost:port/js/three net::ERR_ABORTED 404 (Not Found) I am currently working on a web development project using Three JS. I downloaded the master Zip of ThreeJS from the official website of Three JS I copied the JS files from the Bui ...

javascripthtmlthree.js

Utilizing Nuxt JS to leverage injected functions from one plugin within another plugin file

I recently implemented Nuxt JS's inject feature to add a reusable function to my page. However, I'm facing challenges trying to utilize this function in another plugin file. Here's the setup: plugins/utils/tracking.js function setCookiePre ...

javascriptvue.jsnuxt.js

Utilize Styled Components in React.js to target precise classes

Struggling with integrating a theme into a navbar component that includes a sticky effect on scroll. The issue arises when trying to target the 'sticky' class using styled-components instead of regular CSS. Any ideas on how to properly target the ...

javascriptcssreactjsjsxstyled-components

Printing iframe does not display CSS effects

As I work on developing a program that involves the use of iframes, I have encountered an issue with CSS effects not appearing when trying to print the iframe. Despite applying CSS successfully in browsers like IE, Chrome, Mozilla, and Edge, the printed ou ...

javascriptphpcssajaxiframe

Looking for assistance in grasping a complex Typescript function?

I recently stumbled upon this code snippet involving a filter callback function on an array. I'm feeling lost while trying to comprehend the purpose of this function and have been attempting to dissect it into smaller pieces for better understanding, ...

javascripttypescripttypescript-generics

Navigating external pages with Vue Router

Could really use some assistance. I've got a JSON file filled with various URL links, some internal and some external. This is what the JSON structure looks like: [ {stuff..., "Url":"https://www.google.com/", stuff..}, {stuff... ...

javascripthtmlvue.jsvue-router

Can you nest an if statement within another if statement within a return statement?

Is it feasible to include an if statement inside another if statement within a return function? I understand the standard syntax like: return ( <div> { myVar ? <Component/> : <AnotherComponent/> } </div> ...

javascriptreactjs