Vue-moment displaying incorrect time despite timezone setting

Question

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") }}

javascript laravel vue.js momentjs inertiajs

Answer 1

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)}}

Answer 2

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)}}

Vue-moment displaying incorrect time despite timezone setting

Answer №1

Similar questions

Unable to call a basic object's prototype method

Determine the size of a file in either megabytes or kiloby

Oops! It seems like there's a problem with reading the 'strEmail' property of undefined. Do you have any ideas on how to fix this issue

Is there a way to ensure that the 'pointermove' event continues to trigger even after the dialog element has been closed?

Is it possible to host multiple React applications on a single port? Currently experiencing issues with running both an Admin panel and the Front side in production mode on the same Node.js API server

When using Nuxt JS and Jest, a warning message may appear stating "[Vue warn]: Invalid Component definition" when importing an SVG file

Is there a way to set an antd checkbox as checked even when its value is falsy within an antd formItem?

Encounter issue when using GAS withSuccessHandler function

Import necessary styles into the shadow DOM

Retrieve the quantity of files in a specific directory by implementing AJAX within a chrome extension

Troubleshooting unit tests in Vue CLI 3 with WebStorm: resolving breakpoint issues with the debugger

Using Guzzle to Make a JSON POST Request in Laravel 5.7

Avoiding duplication of prints in EJS template files

Using Angular to automatically update the user interface by reflecting changes made in the child component back to the parent component

obtain the final result once the for loop has finished executing in Node.js and JavaScript

"Exploring the possibilities of mocking routes in Vue 3 with Vitest and

Receiving an error message stating "Uncaught SyntaxError: Unexpected token <" in React while utilizing the AWS SDK

Convert a JavaScript object into a serialized form

Guide to using Ajax to load a partial in Ruby on Rails

Upon sending a POST request to http://localhost:5000/getData, a 404 error (Not Found) was encountered while using axios