implementing a timestamp in a specific timezone with Vue.js

Utilizing a timestamp attribute, I have successfully implemented the display of the current time and date on my webpage.

Is there a way to showcase this information in a specific time zone? I am looking to present it in the ZULU timezone, which remains static and does not adhere to daylight saving time.

<script>
import Logger from './Logger'

export default {
  name: 'Navbar',
  components: {
    Logger
  },
  data: {
    timestamp: ""
  },
  created() {
    setInterval(this.getNow, 1000);
  },
  methods: {
    getNow: function() {
      const today = new Date();
      const date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
      const time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds() + " - " +  "ZULU";
      const dateTime = date +' '+ time;
      this.timestamp = dateTime;
    }
  }
}
</script>

Answer №1

In my opinion, this question pertains to regular JavaScript rather than Vue, as the Date() function is a built-in feature of JavaScript. When a Date object is initially created, it adopts the time zone of the system where it was created. However, you can later convert it to the ZULU time zone using the built-in toLocaleString function, as demonstrated in this response: Convert date to another timezone in JavaScript

For more details on how toLocaleString can facilitate time zone conversions, you can refer to the following resource: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString

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

Leveraging the NextAuth hooks, employ the useSession() function within the getServerSideProps

I'm currently working on retrieving data from my server based on the user who is logged in. I am utilizing Next-Auth and usually, I can easily obtain the session by calling: const { data: session } = useSession(); In a functional component, this work ...

Choose options with identical titles

If you click on the button to add more selects with the same name, I want to replace them so that you can access them in a PHP array. document.querySelector('#add').onclick = function () { var thespan = document.createElement('span&apos ...

guide on incorporating Google Maps in a Vue.js application

Can anyone help me with displaying a Google Map using Vue.js? I have provided the code below, but I keep getting an error saying "maps is undefined" even though I have installed all the necessary dependencies for Google Maps. <div id="map"></div& ...

What is the reason for XMLHttpRequest.status being equal to 0 in all browsers except for Internet Explorer?

I am encountering a frustrating issue... After developing a standalone RESTful.NET webservice using C#, I noticed that when I make a XMLHttpRequest to fetch JSON data, all browsers, except for IE, fail to retrieve the data. The problem lies in the status ...

Incorporating external script into React website's functional component

I have invested countless hours on this particular issue, which appears to be quite trivial, yet I am unable to pinpoint where my mistake lies. I recently purchased terms and conditions from Termly.com and now wish to showcase these terms and conditions o ...

Ways to stop VoiceOver from selecting the background content when a modal is open

Is there a way to prevent VoiceOver from reading the content behind a modal? I tried using aria-modal=true, but it seems VoiceOver does not support this feature by default like NVDA and JAWS do. I found more information about this on . According to the in ...

Having trouble displaying information in a table using React JS

I devised a feature to display one column of a table and one column for checkboxes (each row should have a checkbox). I stored this file in a component folder with the intention of creating a page where the user selects an account type, and then a new tabl ...

What is the best way to apply identical properties to multiple components at once?

With multiple components like <my-a>, <my-b>, and many more each having a prop: { props: { isDetail: { type: Boolean, default: false, } }, } When creating a form using these components, repeating the prop assignment becom ...

Easily implement a wide variety of fonts in your web projects by dynamically loading hundreds of font

I am in possession of a directory called /assets/fonts containing a plethora of fonts that I wish to incorporate into a website in a dynamic manner. Users will be able to specify their font preferences, akin to a text editor. Individually assigning the fo ...

Validation message does not appear when a radio button is left unchecked

I am facing an issue with my aspx page and CS code. I have implemented two radio buttons, YES and NO, where checking YES makes a textbox visible and checking NO hides it. The problem arises when the textbox is left empty - the validation error is not trigg ...

Guide on hosting two html pages on a NodeJS server

Currently, I am in the process of learning NodeJS and Javascript with a goal to construct a basic server that can host 2 HTML pages. One page should be accessible via localhost:3000/index, while the other can be reached through localhost:3000/about. While ...

Is there a way to incorporate the 'window' into middleware when using Express?

I am using middleware to retrieve data from a cookie with the help of vue-cookies. try { if (window.$cookies.get('region')) { res.setHeader('Set-Cookie', [ `region=${window.$cookies.get('region')};pat ...

Exploring SVGO CLI: A guide to inspecting SVGs across various directories

Currently, I am utilizing the SVGO CLI script to transform some icons within my project. Specifically, these icons are located in two separate folders - assets/icons/dark-mode and assets/icons/light-mode. My goal is to navigate through both of these folder ...

Modifying a Vue prop using v-bind with the sync modifier

In my component's data, I have an object. To pass all the properties of this object as props to a child component, I am using the v-bind.sync directive. Even though I am updating these props from the child component using the built-in update event, I ...

Is there a way to create an infinite fade in/out effect for this?

Is there a way to ensure that the method runs after the "click" event in this code snippet? The code currently fades in and out the div #shape while the start variable is true, but when I call the "start" method from the "click" event, the browser stops wo ...

Converting a JSON object into an array of objects

I am looking to transform the following JSON structure let data = { item1: [11, 12, 13, 14, 15], item2: [16, 17, 18, 19, 20] } into this specific format using JavaScript's native functionalities of arrays or objects (compatible with all web brow ...

Tips and tricks for effectively utilizing Material UI's sx props in conjunction with a styles object

In my current project, I am working with a styles object that is structured as follows: styles = { color: "#333", fontSize: "16px", }; When applying these styles to a Material UI component like the example below, everything works a ...

Looking to merge two components into one single form using Angular?

I am currently developing an Angular application with a dynamic form feature. The data for the dynamic form is loaded through JSON, which is divided into two parts: part 1 and part 2. // JSON Data Part 1 jsonDataPart1: any = [ { "e ...

Searching for various object values within an array and then adding two properties together in JavaScript

I am working with an array of objects that require me to analyze two properties in order to calculate a value. let data = [ { NodeId: "9837f279", NodeName: "Node1", summary: { current: 50, limit: 75 ...

Trouble with firing the click event using document.createElement('a') in Firefox

I wrote a function that fetches arraybuffer data from my API, generates a temporary anchor element on the webpage, and then triggers a click event to download the file. Interestingly, this function performs as expected in Chrome. @action async loadVouc ...