Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Understanding UTC time in js

Backend give me data of gantt diagramm start and end points in format:

"horizont_start": "2024-05-01T00:00:00Z",
"horizont_end": "2025-01-26T00:00:00Z",

Next i give through props to another component Date format of this points like this:

<NewGanttChart
    start={
        new Date(
            gantt?.horizont_start ||
                new Date(
                    new Date().getFullYear(),
                    0,
                    1
                )
        )
    }
    end={
        new Date(
            gantt?.horizont_end ||
                new Date()
        )
    }
    data={gantt?.machine_types || []}
    isTooltip={true}
    tooltip={tooltip}
/>

in component i use function to calculate timeAxis intervals:

//also save in store start and end time
useEffect(() => {
        dispatch(setStartTime(start?.getTime()))
        dispatch(setEndTime(end?.getTime()))
    }, [start, end])
 const timeAxis = useMemo(() => {
       
        const axisLength = Math.ceil((end - start) / (measure * 60 * 60 * 1000))

        const axisDates = new Array(axisLength).fill(0).map((_, i) => {
            const date = new Date(start.getTime())
            const newDate = new Date(+date + 1000 * 60 * 60 * measure * i)

            return newDate.getTime()
        })

        console.log(axisDates)

        return axisDates
    }, [end, measure, start])

My main problem is local time, so i want to show start point time 00:00:00, but i got +5h 05:00:00, how to solve this problem?

PS: one more time with logs

console.log(gantt?.horizont_start) // output 2024-05-01T00:00:00Z

console.log(new Date(gantt?.horizont_start)) // output Wed May 01 2024 05:00:00 GMT+0500 (Uzbekistan Standard Time)
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    So, i've decided to get timeZoneOffSet and use it in my function like this and it's working for me:

    const timeAxis = useMemo(() => {
        const startOffset = start.getTimezoneOffset()
        const endOffset = end.getTimezoneOffset()

        const adjustedStart = new Date(
            start.getTime() + startOffset * 60 * 1000
        )

        const adjustedEnd = new Date(end.getTime() + endOffset * 60 * 1000)

        const axisLength = Math.ceil(
            (adjustedEnd - adjustedStart) / (measure * 60 * 60 * 1000)
        )

        const axisDates = new Array(axisLength).fill(0).map((_, i) => {
            const date = new Date(adjustedStart.getTime())
            const newDate = new Date(
                date.getTime() + 1000 * 60 * 60 * measure * i
            )

            return newDate.getTime()
        })

        return axisDates
    }, [end, measure, start])

  2. 0

    When you create a new date instance with the returned string it will be in client local time:

    const incoming_value = "2024-05-01T00:00:00Z";
console.log("incoming_value:n" + incoming_value);
// Expected output: "2024-05-01T00:00:00Z"

const horizont_start_local = new Date(incoming_value); 
console.log("horizont_start as local time:n" + horizont_start_local);
// Expected output: "Wed May 01 2024 03:00:00 GMT+0300 (GMT+03:00)"

const horizont_start_UTC = new Date(incoming_value).toISOString(); 
console.log("horizont_start as UTC:n" + horizont_start_UTC);
// Expected output: "2024-05-01T00:00:00.000Z"

    Looks like it is the only way using .toISOString() to display it as it is.

    Login or Signup to reply.
  3. 0

    The time 00:00:00 UTC is the same moment in time as 05:00:00 in a +5h time zone.

    To solve you issue you’ll probably want to be working with the UTC representation. To do this replace the Date methods you’re using to their UTC variants:

    To log/display the time you can use toUTCString() or toISOString(), depending on the preferred format.

    Working with the above methods lets you work with the same time zone that the server provides. Meaning that time doesn’t jump, assuming the server always provides UTC time.

    // assuming your time zone is set to Uzbekistan Standard Time
new Date("2024-05-01T00:00:00Z").getHours() //=> 5
new Date("2024-05-01T00:00:00Z").getUTCHours() //=> 0

    Alternatively you could ignore the time zone, and read the dates in local time. This can be done by chopping of the Z which denotes UTC.

    const horizont_start = "2024-05-01T00:00:00Z".replace('Z', '');
console.log(new Date(horizont_start)); // without the Z
// Wed May 01 2024 00:00:00 GMT+0500 (Uzbekistan Standard Time)

    WARNING: Do note that 2024-05-01T00:00:00Z and 2024-05-01T00:00:00+05:00 are two different moments in time:

    2024-05-01T00:00:00Z = 2024-05-01T05:00:00+05:00
2024-04-30T19:00:00Z = 2024-05-01T00:00:00+05:00

    So if the exact moment in time is important you do NOT want to use this method.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search