Converting Date Format According to Visitor's Time Zone in VueJs/JS

I have a Date in string Format: 2020-07-13 7:07 AM (which is indian time). I am looking to adjust this time according to the browser's time zone, which could be either in the US or Africa.

I have attempted various methods to convert it accurately. Here are the steps I have taken:

var d = "2020-07-13 7:07 AM";
var date = new Date(d); //Mon Jul 13 2020 07:07:00 GMT+0530 (India StandardTime)
var date1 = moment(date, 'YYYY-MM-DD HH:mm T'); //undefined

I would greatly appreciate your assistance with this issue. I need to achieve this conversion in both VueJs and Javascript.

javascriptvue.jsmomentjsmoment-timezone

Answer №1

It is recommended to convert your timestamps into the ISO 8601 format, which includes the UTC-offset. One way to achieve this is by utilizing the new Date().toISOString() method. Once converted, you can utilize the moment library for further manipulation. If you need to display the time in a different timezone, consider exploring the capabilities of moment-timezone.

Answer №2

This is my approach to finding the solution:

    var buildDate = "2020-07-13_7:07";
    let releaseDate = buildDate .split('_');
    let currentDate = moment(currentDate);
    let newReleaseDate = moment(new Date(currentDate.get('year'), currentDate.get('month'), currentDate.get('date'), currentDate.get('hour'), currentDate.get('minute'))).add(new Date().getTimezoneOffset()*-1, 'm').toDate();
let finalResult = moment(newReleaseDate).format('MMM DD YYYY h:mm A');

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

The Vue.js @click event does not function properly when used in a selection on mobile

I designed a dropdown menu with different options, and when one is selected it updates the "Value" in vue to a specific amount. Then, I display the selected amount in an input field. For example: <select class="form-control" style="max-width: 150px;" ...

javascripthtmlvue.js

Change the x and y positions of several div elements as the mouse moves in JavaScript

I am aiming to create a webpage where multiple divs with text and other content move along the x and y axes of the mouse. The desired effect is similar to parallax scrolling, but I have found that existing parallax plugins are image-based and do not work w ...

javascriptjquerycssmouseeventparallax

Steps to alter the color of a JSONLoader-generated object with a simple click

Recently, I've been delving into Three.js and managed to create an object using the JSONLoader. The material of the object is currently grey in color. My goal now is to allow users to change the color of the object by clicking on a button that I have ...

javascriptthree.js

My goal is to exclusively create illustrations of items within a camera's view

Currently, I am using THREEJS to create a dynamically generated 'minecraft' world utilizing a perlin noise generator. Check out the progress so far: Block World Everything is going smoothly except that I am facing significant performance issues ...

javascriptthree.js

What is the best way to show only the weekdays on the x-axis?

My goal is to create a scatter-linked graph using D3.js, showcasing the people count for various shifts on different dates in January 2020. Here is the code snippet I am working with: <!DOCTYPE html> <html lang="en" > <head> & ...

javascripthtmlcssd3.jssvg

Node and Express continuing to send requests in a loop even after the response has been completed

After trying numerous solutions without success, my mind has reached its limit. So here I am seeking guidance. How can this seemingly simple code snippet (let's name it app.js): var express = require('express'); var app = express(); app.us ...

javascriptnode.jsexpress

Fluctuating updated site (ajax)

What method do you recommend for maintaining the data in a table on a page current? Currently, I am using a timer that connects to the server via ajax every 2 seconds to check for updates. Is there a way to trigger an event or function only when the cont ...

javascriptphpajax

Executing a javascript file inside a jade document

I need help incorporating a JavaScript file into my Jade file so that it runs every time the page is accessed. How can I achieve this? Here is my current code snippet: doctype html html head title= title body h2 Bus Driver Locati ...

javascriptnode.jsexpresspug

What causes the .getJSON function to return a MIME type error when trying to access the API

I've been attempting to make a call to the Forismatic API, but I keep encountering a MIME type error when sending it. JQuery Request: $(document).ready(function() { $("#quote-button").on("click", function(){ $.getJSON("https://api.forism ...

javascriptjqueryjson

having trouble retrieving data from JSON array using JavaScript

I am having trouble fetching the JSON value to determine if the person in the photo is wearing glasses. The value is spread across four arrays: photos, tags, attributes, and glasses. My goal is to check if the value "value" is either true or false. I have ...

javascriptjson

What methods can I utilize to prevent pop-up errors from appearing in my javascript code?

Recently, I've been working on utilizing an innovative IBM tool called Presto that efficiently transforms traditional green screens into browser-based pages. While the process is effective, it involves some quirky behaviors. One particular challenge I ...

javascriptgetelementbyid

Vue-chartjs not displaying chart unless the page is resized

Using vue-chartjs for creating charts in my application, I pass the chartData as a prop. Initially, the chart doesn't render, but it does upon window resize. Here is the code starting with the chart component: <script> import { Doughnut, mix ...

vue.jschart.jsvue-chartjs

What is the equivalent of a very deep selector in TailwindCSS?

When working with the v-deep selector to customize the appearance of tiptap, a rich text editor, accessing the .ProseMirror class in SCSS would look like this: editor-content { // ... styles &::v-deep(.ProseMirror) { // ... styles } } ...

cssvue.jsvuejs3tailwind-csstiptap

Update the variable using Ajax after the content has loaded

I am struggling with the following code snippet: <?php $num=12; ?> <html> <head></head> <body> <div id="test"></div> <script type="text/javascript"> function fetchContent() { var ...

javascriptphpajaxvariablesload

Ways to expand the play and pause buttons and adjust the height of an HTML audio player

It's clear that the PLAY/PAUSE icons are smaller than intended, and the entire player is thinner than desired, making it difficult for some viewers to see. How can I enlarge the entire player? I have read that we do not have access to individual contr ...

javascripthtmlcsshtml5-audio

Can you tell me the appropriate type for handling file input events?

Using Vue, I have a simple file input with a change listener that triggers the function below <script setup lang="ts"> function handleSelectedFiles(event: Event) { const fileInputElement = event.target as HTMLInputElement; if (!fileInp ...

javascripttypescriptvue.js

Is it possible to use the .focus() event on an entire form in JQuery? If so, how

Take a look at this HTML snippet: <form ....> <textarea>....</textarea <input .... /> </form> I'm trying to set up a help section that appears when the user focuses on any form element, and disappears when they lose ...

javascriptjqueryhtmlformsfocus

Tips on initiating a $http.get request every second using a service

I am working on an angular application that includes a $http.get request. While it currently functions properly, I need it to be executed every second in order to retrieve new data. Service: angular.module('adf.widget.liveCharts') .service(&a ...

javascriptjqueryangularjsangular-services

How can I utilize Javascript XMLHttpRequest to redirect to a different component in Angular 2?

I am attempting to perform a POST request using XMLHttpRequest and I would like to redirect to another component if the xhr request is successful. Here is the code snippet: import {Component, Inject, Injectable, OnInit} from 'angular2/core' imp ...

javascripttypescriptxmlhttprequestangular

PHP script for batch string replacement

My function is triggered by a button click, where it takes two input IDs and forms a string as follows: var str = "headingText=" + $("#headingText").val() + "&centerText=" + $("#centerText").val(); $.ajax({ url: "indexpdf.php", data: str, ...

javascriptphpajaxstringstr-replace