Preserve the specific date and time in the designated timezone

Utilizing the react-datePicker library requires using new Date() as input. I need to save the user's selected date, time, and timezone in such a way that regardless of their location, they will see Feb 10 2024 02:00 BST in the Date Object.

Currently, using 

new Date("2024-02-10T03:00:00.000Z")
returns 
Sat Feb 10 2024 08:30:00 GMT+0530 (India Standard Time)
. My goal is to have it displayed as `Sat Feb 10 2024 08:30:00 GMT+0100 (British Summer Time).

I've already attempted:

const tzname = "Europe/London";
const longOffsetFormatter = new Intl.DateTimeFormat("en-US", {timeZone: tzname ,timeZoneName: "longOffset"});
const longOffsetString = longOffsetFormatter.format(new Date("2024-02-10T03:00:00.000"));

Although Moment.js could solve this issue, it is considered legacy and not recommended for use. How can I store the Date according to the provided timezone rather than the local timezone?

javascriptdatedatetimetimezonereact-datepicker

Answer â„–1

To enhance your time handling capabilities, consider leveraging the power of luxon, a library that offers modern alternatives to Moment.js and includes comprehensive timezone support.

const { DateTime } = require('luxon');

// User-provided inputs
const selectedDate = '2024-02-10'; // Sample date
const selectedTime = '02:00'; // Sample time

// Merge date and time into a unified string
const dateTimeString = `${selectedDate}T${selectedTime}:00.000`;

// Generate a DateTime object based on the user's selections in UTC
const utcDateTime = DateTime.fromISO(dateTimeString);

// Convert the UTC DateTime object to the local time zone
const localDateTime = utcDateTime.setZone('local');

// Format the local DateTime object as desired
const output = localDateTime.toLocaleString({
  weekday: 'short',
  month: 'long',
  day: 'numeric',
  year: 'numeric',
  hour: 'numeric',
  minute: '2-digit',
});

console.log(output);

The resulting output is

Sat, February 10, 2024, 2:00 AM // Alternatively
Feb 10 2024 02:00 BST

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

Error Encountered in Reactjs: TypeError When Looping Through State Array to Render JSX Component

Currently in the process of constructing a gallery view showcasing cards that are populated with images fetched through an axios API call. The API call is made within a useEffect hook and the resulting object is then stored using useState. However, when ...

javascriptreactjsarraysreact-hookstypeerror

JavaScript conditional calculation mechanism

Here is the code snippet I am referring to: function myFunction() { var x = document.getElementById("ins-feet").value; if(x >= 0 && x <= 1499) { document.getElementById("show-cost").innerHTML = "Cost: $" + 300; } else if ...

javascriptcalculator

Personalize the appearance of your stackLabels in Highcharts with dynamic customization options

I recently created a bar graph using Highcharts. You can check it out here: http://jsfiddle.net/v1rbz41q/3/ Here's the code snippet I used: chartw.yAxis [0] .options.stackLabels.formatter = function () {              return "werfdc";   ...

javascripthighcharts

The HTML elements in my JSX code seem to constantly shift around whenever I resize my webpage

Using react.js, I'm currently developing a website that appears like this before resizing: pre-resize_screenshot_website However, upon vertical or diagonal resizing, the layout becomes distorted especially in the 'availability search bar' ...

javascripthtmlcssreactjs

Organizing a list based on the text within span elements using either jQuery or underscore

I'm a bit confused about how to arrange an unordered list by the content of the span within each list item. Here is my HTML code: <ul id="appsList"> <li><span>aa</span> <span class="sort">androi ...

javascriptjqueryunderscore.js

I am experiencing difficulty getting my component to properly implement the bootstrap NavBar and NavIcon styles

I am new to using bootstrap with react and I am facing an issue where the dimensions are not being applied to my Navbar and Navbar Icon. I have already installed dependencies and used className instead of class, but still no changes are visible. import Re ...

javascriptreactjsbootstrap-4

Utilizing jQuery DataTable with an AJAX call to retrieve data from a JSON

I am facing an issue while trying to retrieve data from Entity Framework in ASP.NET MVC using a jQuery data table with AJAX. The data is not displaying in the table as expected. I need assistance in identifying the mistake in my approach. Upon executing t ...

javascriptjqueryajaxjsonasp.net-mvc-3

Retrieve the values of two inputs from outside of the event

How can I access the values of two input fields in order to perform calculations as soon as their values are updated? <script> // Accessing the values of the two input fields for immediate calculation based on user input const heightInputEl = docum ...

javascriptinputevent-handling

Utilizing a Json.Net object within an Ajax request

Is there a way to pass a .Net object in an Ajax call using the Json.Net javascript library instead of json2.js? You can find more information on passing complex types via Ajax calls at this link: I am familiar with how to serialize and deserialize object ...

javascriptjqueryajaxjsonjson.net

What is the process for securing a photo to a canvas?

I have included <input type='file' id="image"> in my HTML code. How can I display the uploaded image on my canvas using p5.js? What is the best way to add an event listener to this action and transfer the uploaded file onto the ca ...

javascripthtml

Challenges with creating an increment and decrement form component using Vue

I've been working on this for almost three days now. My goal is to create a reusable component in Vue that allows a passed value to be incremented and decremented with the click of a button, and then submitted in a form. Below is my code: Parent Com ...

javascriptvue.jsvuejs2nuxt.js

Issues with executing basic unit test in Angular Js

THE ISSUE: In an attempt to create unit tests for my Angular application, I set up a basic test app and wrote a simple unit test. However, the test is not functioning as expected. APPLICATION CODE: var app = angular.module( 'myApp', [] ); app ...

javascriptangularjsunit-testingkarma-runner

Alpine declined the action of toggling a list with x-show

My goal is to create a toggleable list of items using Alpine & x-show. I want the list to be visible when the page loads and allow the user to toggle it as needed. Although the button works correctly and the JavaScript is set up properly, the list itself d ...

javascriptbootstrap-5alpine.js

Guide to incorporating tesseract OCR into a Cordova/Phonegap application

My attempts to use Tesseract OCR with my app have been unsuccessful despite following the instructions provided here. After inspecting the code using Google Chrome Dev console through the WebView, I encountered an error: Uncaught SyntaxError: Unexpected ...

javascriptjavacordovaocrtesseract

Header misalignment occurs when the user scrolls up too quickly causing it to display

One interesting feature on my website is that the header disappears as users scroll down the page, but reappears when they start scrolling back up, even if they are halfway down. However, if a user quickly scrolls up and down, there seems to be an issue wi ...

javascriptjqueryhtmlcss

When clearInterval is used to stop a setInterval, it will not automatically restart if reset with setInterval

I am facing an issue with a countdown timer that I have created using setInterval in JavaScript. The timer is supposed to countdown from one minute at one second intervals. However, when I click the "start" button, it starts the countdown but if I click an ...

javascriptjquery

Load information into array for jqGrid display

I am attempting to populate my JQgrid with data every time I click the "1" button, but I am encountering difficulties. As a newbie in jQuery, I am able to display the data in a p tag without any issues. Currently, I am considering whether to use push or a ...

javascriptjqueryarraysjqgrid

Stylist in Visual Studio Code for React applications

Whenever I try to save or format my React code using Ctrl + Shift + F, the formatting of the code below seems unusual. Is there a way to fix this issue? The original code is as follows: import logo from './logo.svg'; import './App.css&apos ...

javascriptreactjsformatter

React Color Input: The input format should follow the pattern of "#rrggbb", with rr, gg, and bb being two-digit hexadecimal values

The code is functioning correctly and as expected. The background color of the squares changes when each input is modified, and the squares update once the button is pressed. During development, there was a moment when the warning mentioned appeared brief ...

javascriptreactjsinputtypescolors

What is the process for applying a class in jQuery to empty HTML elements?

Working on a WordPress/PHP website and looking to dynamically add a class when child elements are empty? This is the HTML structure: <div class="featured-block"> <a href="/" class="featured-block__item cf"> <div class="featured-bl ...

javascriptjqueryhtml