Vue-moment displaying incorrect time despite timezone setting

Feeling a bit puzzled about my Laravel 8 application. I store time in UTC with timestamp_no_timezone in my PostgreSQL database. When I check the time in the database, it displays today's date with 13:45 as the time. However, when I use vue-moment and set the timezone to America/New_York, it still shows 1:45 PM instead of the expected 8:45 AM with the offset. What could be causing this issue? I even checked the timezone from moment using console.log and it confirmed America/New_York.

Here is the expression I am currently using:

{{ [ timesheet.start, "YYYY-MM-DD HH:mm:ss" ] | moment("timezone", "America/New_York", "h:mm A") }}

javascriptlaravelvue.jsmomentjsinertiajs

Answer №1

Transform the dateTime value into epoch format before sending it as a response.

There are various methods to convert dateTime to epoch (send dateTime in epoch format as part of the response).

Include this code snippet in your Model

protected $casts = ['datetime_field' => 'timestamp']

Add the following function to the Laravel class responsible for sending the response

    protected function toEpoch($datetime )
    {
        if (gettype($datetime) == 'string') {
            $datetime = new DateTime($datetime);
            return Carbon::instance($datetime)->format('U');
        } else if ($datetime instanceof Carbon) {
            return $datetime->format('U');
        } else if ($datetime != null) {
            return Carbon::instance($datetime)->format('U');
        }
      } 
    }

For a Vue project implementation

{{new Date(epoch*1000)}}

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

Exploring the use of callbacks in React closures

After diving into a React related article, I delved deeper into discussions about closures and callbacks, checking out explanations on these topics from Stack Overflow threads like here, here, and here. The React article presented an example involving thr ...

javascriptreactjs

Changing the key name for each element in an array using ng-repeat: a guide

In my current project, I have an array of objects that I am displaying in a table using the ng-repeat directive. <table> <thead> <tr> <th ng-repeat="col in columnHeaders">{{col}}</th> //['Name&apo ...

javascriptangularjs

On the first load, Next.js retrieves a token from an API and saves it for later use

Currently working on an application with next.js, the challenge lies in retrieving a guest token from an API and storing it in a cookie for use throughout the entire application. My goal is to have this token set in the cookie before any page is loaded. H ...

javascriptnode.jsreactjsnext.jsserver-side-rendering

What is the best way to loop through arrays of objects within other arrays and delete specific attributes?

I have an array of JavaScript objects with potential children who share the same type as their parent. These children can also have their own set of children. My goal is to loop through all nodes and modify certain values. [ { "text": "Auto", ...

javascript

Oops! The Route.get() function in Node.js is throwing an error because it's expecting a callback function, but it received

Currently, I am learning how to create a web music admin panel where users can upload MP3 files. However, I have encountered the following errors: Error: Route.get() requires a callback function but received an [object Undefined] at Route. [as get] (C:&bso ...

javascriptnode.jsmongodbexpress

What techniques can I use to streamline this jQuery script?

Presented below is the code for a straightforward newsletter signup widget. I believe there's potential to streamline it further, any suggestions? const emailForm = $('.widget_subscribe form'); const emailSubmit = $('.widget_subscrib ...

javascriptjquery

Angular JS: Grabbing Text from a Specific div and Copying it to Clipboard

I recently developed a Random Password Generator using Angular JS. Here is how the output appears in the application: <div data-ng-model="password" id="password"> <input class="form-control" data-ng-model="password" id="password" placeholder=" ...

javascriptjqueryhtmlangularjs

How can you proactively rebuild or update a particular page before the scheduled ISR time interval in Next.js?

When using NextJS in production mode with Incremental Static Regeneration, I have set an auto revalidate interval of 604800 seconds (7 days). However, there may be a need to update a specific page before that time limit has passed. Is there a way to rebui ...

javascriptnode.jsnext.js

Dynamic water filling effect with SVG

I'm trying to create a wipe animation that looks like water filling up inside of a drop shape. Currently, it is a square with a wave animation on top of the drop logo. The wave animation works correctly, but I am struggling to contain it within the dr ...

javascriptcssanimationsvgfill

Console is displaying an error message stating that the $http.post function is returning

Just diving into angular and I've set up a controller to fetch data from a factory that's loaded with an $http.get method connecting to a RESTful API: videoModule.factory('myFactory', function($http){ var factory = {}; facto ...

javascriptnode.jsangularjspost

Unable to perform navigation during page load in a React.js application

I attempted to navigate to a route that should redirect the user back to the homepage when postOperations isn't set in the localStorage. To save time, please review the code snippet focusing on the useEffect and the first component inside return(). im ...

javascriptreactjsnode.jstypescriptnext.js

Navigating the seamless integration of an API key with axios involves a systematic

Attempting to retrieve data from the specified api at using my provided api key. However, upon requesting the data, I received an error stating "Invalid key". Below is the code I am using: https://i.stack.imgur.com/jRwi5.png Here is the response I rece ...

vue.jsaxiosnuxt.js

Is it possible to bind Tailwind classes with Storyblok?

Currently, I am in the process of creating components for our content editors to use in Storyblok. There is a particular scenario where we want to specify layout properties (using Tailwind's classes) through props received from Storyblok components. ...

vue.jsnuxt.jstailwind-cssstoryblok

Ways to set the base URL on the development server for a call to react-scripts start

I am facing an issue with configuring my primary PHP server to run the ReactJS dev server created using yarn start within a directory named /reactive on the PHP site (using nginx proxy_pass). The problem is that I cannot set the root of the node server to ...

javascriptreactjsnginx

Navbar active class not updating on jQuery page scroll

My one-page website has a fixed navbar that I want to change its active status when scrolling down to specific div positions. Even though I tried using jQuery, the code doesn't seem to work as intended. Here is the snippet: // SMOOTH SCROLLING PAGES ...

javascriptjqueryhtmlcss

Properly executing a for loop

I have devised a method to transform Swagger 1 documentation into Swagger 2. This involves utilizing an array of resources as input for the conversion process. However, I have encountered an issue where the code seems to be skipping ahead and jumping to ...

javascriptnode.jscallbackorder-of-execution

Model Abstracted Aurelia Validation

I recently completed an online course on Aurelia by Scott Allen where he introduced the Aurelia-Validation plugin for form validation. As a result, my view-model now looks like this in edit.js: import {inject} from "aurelia-framework"; import {MovieServi ...

javascriptaurelia

How can I get rid of the excessive white space in my Vue.js/Vuetify dialog box?

I am facing an issue with my web app's dialog box where there is empty white space appearing between the v-cards and the v-card-action buttons (Save and Cancel). Is there a way to remove this whitespace or scrollbar? I attempted to place the Cancel/S ...

vue.jsvuetify.js

JavaScript conflicts will arise due to the introduction of Yammer Embed on September 30th, 2014

Is anyone else encountering problems with Yammer embed causing JavaScript errors today? Our various applications across different technologies (SharePoint, IBM, etc) have been functioning normally for months, but this morning we are suddenly seeing a sig ...

javascriptyammer

Guidelines for attaining seamless motion animation utilizing devicemotion rotationRate information

I am utilizing the rotationRate data obtained from the devicemotion eventListener to manipulate a three.js scene by tilting. The scene does respond to the data accurately in terms of angle adjustments, but it produces an unsmooth motion effect. Is there a ...

javascriptthree.js