Converting UK DateTime to GMT time using Angular

I am currently working on an angular project that involves displaying the start and end times of office hours in a table.

For instance, the office operates from 8:30 AM to 5:30 PM.

This particular office has branches located in the UK and India.

Since users may input times based on either UK or Indian time zones, I'm planning to store the data in GMT.

To achieve this, I need to provide an option for users to select their time zone and enter the corresponding time.

Afterward, I must convert that local time to GMT before sending it to the database.

Could you please guide me on how to convert UK time to GMT?

If you have any other ideas or suggestions for handling this scenario, I would greatly appreciate your advice.

Thank you.

javascriptangulartypescriptdatetimedate-pipe

Answer №1

ECMAScript Date instances do not have a specific timezone; they are inherently in UTC. System settings determine the default behavior of toString, get, and set methods, making them appear local.

It is recommended to avoid using the basic parser for anything other than parsing the exact format specified in toISOString.

You may find relevant information in How to initialize a JavaScript Date to a particular time zone, which could potentially address your inquiry.

Until wider support for the Temporal object is available, utilizing a library is the most effective way. There are various libraries that handle timezones, with Luxon being an example:

// Alias
let DateTime = luxon.DateTime;

// Create a date for now in London
let ukDate = DateTime.now().setZone('Europe/London');

// Set it to the required time
let ukOpenTime = ukDate.set({hour:8, minute:30, second:0, millisecond: 0});
console.log('ukOpenTime as string    :' + ukOpenTime.toString());

// Get time value to store
let millis = ukOpenTime.toMillis();
console.log('ukOpenTime as time value: ' + millis);

// Show equivalent local time in numerous ways
// Shift ukOpenTime to local zone: default is the local (system) timezone
let localOpenTime = ukOpenTime.setZone();
console.log('Equivalent local time 1 : ' + localOpenTime.toString());

// Use the time value (millis) to create a new Luxon object
let localOpenTime2 = DateTime.fromMillis(millis);
console.log('Equivalent local time 2 : ' + localOpenTime2.toString());

// Use the time value (millis) to create a plain date
let localOpenTime3 = new Date(millis);
console.log('Equivalent local time 3 : ' + localOpenTime3.toString());
<script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/3.0.1/luxon.min.js"></script>

Answer №2

Instead of storing it in a specific time format, consider using Epoch Time and converting it as needed. For example, 1659755549? Alternatively, you could use epoch time as an intermediate step for calculations.

p.s. Unfortunately, no reputation points are earned for comments :(

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

Confirm button title by verifying part of the label that contains a space

I'm facing an issue with clicking a button using the following code: await page.getByRole('button', { name: '3 Employees' }).click(); The problem is that the button's name fluctuates based on the number of employees, causing ...

typescriptautomationplaywrightmatcher

Achieve horizontal bar movement by utilizing google.visualization.DataTable in a left-to-right motion

I am exploring the possibility of reversing the direction of a chart(bar) using google.visualization.DataTable. In the current setup, the bar progresses from left to right, but I wish for it to move from right to left instead. Below is what I have attempte ...

javascripthtmlgoogle-api

Utilize custom SMTP with JavaScript to dispatch emails

I'm wondering if it is possible to send emails using just JavaScript (I am working on a PhoneGap app). I envision a scenario where I can connect to a specific SMTP server with a login and password, and then send emails using that connection. I have al ...

javascriptcordovaemailsmtp

Transmit data in the form of a buffer

const response = await client.render(data); const Writable = require('stream').Writable; var buffer = []; const myWritableStream = new Writable({ write(chunk, encoding, callback) { ...

javascriptnode.jsexpressjsreport

Angular 2 ngFor generates a collection of rows and columns forming a single large column

It seems that ngfor is generating divs one by one, resulting in a poor design where they are stacked on top of each other. I would like to achieve a layout like this: [1] [2] [3] [4] [5] [6] However, the current outcome looks like this: [ 1 ] [ 2 ] [ 3 ...

javascriptangulartypescriptngfor

Guide on sending files through an API request with formData() using Vuejs and Axios

My goal is to utilize an API to upload a file to the server. The documentation on documenter.getpostman outlines how to use the API: --form 'type="1"' \ --form 'user_id="1"' \ --form 'file=@"/C:/U ...

javascriptvue.jsaxiosform-data

PHP Ajax not updating variable as expected

Apologies for the repetitive questions, but I have tried numerous solutions and cannot seem to figure out why this particular one is not working. I am invoking ajax through a click function, but I am unable to retrieve the jList value and update the variab ...

javascriptphpjqueryajax

Extract information from an HTML table into PHP

I have an HTML table that is generated dynamically and I am looking to extract the data from it using the POST method. Is there a way to accomplish this? Are there any alternative methods you would suggest for achieving this goal? Below is a basic example ...

javascriptphphtml-table

Tips for including arguments in pm2 file execution

What steps should I take to run the cluster.js file on pm2 successfully? When I try executing the file locally with 'node cluster.js 0 1' command, it appends two arguments but encountering an error when using 'pm2 start "cluster.js 0 1"&apos ...

javascriptnode.jsnpmpm2

What could be causing the "ng not found" error as I try to deploy my Angular application on Heroku?

Here is the structure of my project: package.json (A) index.js client > package.json (B) This is how the outer package.json (A) is set up : { "name": "---", "version": "1.0.0", "description": "---", "main": "index.js", "scripts": { "sta ...

node.jsangularherokunpm

Switching minimum and maximum input values based on a specific condition: A step-by-step guide

I am looking for a way to reverse the minimum and maximum values of two input elements that I have defined. Is there a way to achieve this using HTML or JavaScript (Angular)? Here is an example of what I am trying to do: <label> Width: < ...

javascriptangularjshtmlinput

"By setting the HTML input box to read-only, the JavaScript button has the

Check out this js fiddle demonstration: http://jsfiddle.net/YD6PL/110/ Here is the HTML code snippet: <input type="text" value="a" readonly> <input type="text"> <input type="text"> <div> <button class="buttons">c</button ...

javascripthtml

Creating DIV's with Equal Heights Using AngularJS ng-repeat

I'm currently facing an issue with aligning two side-by-side divs to the same height when the content is generated using an ng-repeat function. Using flexbox is causing responsiveness issues, and I'm unsure of the appropriate time to call a jQuer ...

javascriptjqueryhtmlcssangularjs

Ways to determine the new position following a drop event using cdkDrag

Hey there, I'm looking to implement a drag and drop feature for some HTML elements but I'm struggling to capture the end position after dropping. After checking out the documentation, I see that with the use of the cdkDrag directive, there' ...

angulardrag-and-dropdraggable

I'm having trouble with the calculator, unable to identify the issue (Typescript)

I'm struggling with programming a calculator for my class. I followed the instructions from our lesson, but it's not functioning properly and I can't pinpoint the issue. I just need a hint on where the problem might be located. The calculat ...

javascripthtmltypescriptcalculator

Creating responsive images in a navbar with HTML and CSS

I need help with this code snippet: <div> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container"> <div class="d-flex flex-row justify-content-center align-items-center"> <a cla ...

javascripthtmlcssbootstrap-4

Different methods to prompt TypeScript to deduce the type

Consider the following code snippet: function Foo(num: number) { switch (num) { case 0: return { type: "Quz", str: 'string', } as const; case 1: return { type: "Bar", 1: 'value' } as const; default: thr ...

typescript

Tips for sending multiple post parameters to a web API in Angular using TypeScript

I am looking to send multiple values to a web API using AngularJS TypeScript. // POST api/values public void Post([FromBody]string value1, [FromBody]string value2) { } I want to make the method call like this: $http.post('api/values', ???) I ...

angularjsasp.net-web-apitypescript

Dynamically adjust the label position based on the button position

I am currently developing an interface that allows users to change the position of buttons and add a label text under the button. However, I am facing an issue where the label is not always centered below the button due to variations in the size and number ...

htmlcssangulardynamiclabel

Can you explain the concept of a framework operating "on top of" node.js in a way that would be easy for a beginner to understand?

If someone is new to JavaScript, how would you explain the concept of "on top of node.js" in simple programming language? I am looking for a general explanation as well as specific reference to Express on top of node.js in the MEAN stack. Appreciate your ...

javascriptangularjsnode.jsexpressmean-stack