no way to format time-picker value to utc/gmt (instead of local time)

[wc-matteo]

TuSimple/naive-ui version (版本)

2.14.0

Vue version (Vue 版本)

3.1.2

Browser and its version (浏览器及其版本)

Chrome 91.0.4472.114

System and its version (系统及其版本)

Windows 10

Node version (Node 版本)

Reappearance link (重现链接)

https://codesandbox.io/s/cool-monad-7we80?file=/src/Demo.vue

Reappearance steps (重现步骤)

Observe the formatted value

Expected results (期望的结果)

Being able to set the format to utc/gmt

Actual results (实际的结果)

The value is formatted using the user local time

Remarks (补充说明)

Here's a discussion about date-fns and utc formatting: date-fns/date-fns#1401

[wc-matteo]

So after researching some more I found that by simply stripping the UTC timezone information (Z) from the date:
1970-01-01T09:00:00.000Z
=>
1970-01-01T09:00:00.000

date-fns treats the date as if it were local. This way it doesn't transform it in any way when formatting.

---

This is what I'm using to convert the date string (1970-01-01T09:00:00.000Z) to a valid time-picker value:

parseInt(format(parseISO(value.slice(0, -1)), 'T'), 10)

(format and parseISO are from date-fns)

I tested changing hour/timezone on my pc and the time stays the same (as intended)

[07akioni]

As far as I understand, you only want to format time to utc? Or you want to select time (hours, minute, second) as utc.

[07akioni]

So after researching some more I found that by simply stripping the UTC timezone information (Z) from the date:
1970-01-01T09:00:00.000Z
=>
1970-01-01T09:00:00.000

date-fns treats the date as if it were local. This way it doesn't transform it in any way when formatting.

This is what I'm using to convert the date string (1970-01-01T09:00:00.000Z) to a valid time-picker value:

parseInt(format(parseISO(value.slice(0, -1)), 'T'), 10)

(format and parseISO are from date-fns)

I tested changing hour/timezone on my pc and the time stays the same (as intended)

Please provide a format pattern string & expected output string.

[wc-matteo]

let's take this timestamp:

32400

(naive, like js, uses milliseconds not seconds, so it's actually 32400000, but it doesn't really matter)

if you put that timestamp here, you get this:

I want 9 AM. Naive gives me 10 AM, cause it uses my local time to adjust the value.
I'm not talking about format patterns, etc. The feature is to have an option to pass a timestamp and not have the value be adjusted depending on the user's local time.

Here I describe the way I fixed it for my case. I.e. I made the input date in local time (and not utc) so there was no conversion made

[07akioni]

let's take this timestamp:

32400

(naive, like js, uses milliseconds not seconds, so it's actually 32400000, but it doesn't really matter)

if you put that timestamp here, you get this:

I want 9 AM. Naive gives me 10 AM, cause it uses my local time to adjust the value.
I'm not talking about format patterns, etc. The feature is to have an option to pass a timestamp and not have the value be adjusted depending on the user's local time.

Here I describe the way I fixed it for my case. I.e. I made the input date in local time (and not utc) so there was no conversion made

You want to click at 9 AM (GMT) and get 9 AM (GMT) or click at 10 AM (local) and get 9 AM (GMT)?

[wc-matteo]

when I click 9 am I want to get 9 am. When I put a value in the vmodel I want it to be that value and not be changed to my local time. Basically what I want is a dumb time picker, that works like a dropdown. No conversions

[theo-stocchetti]

when I click 9 am I want to get 9 am. When I put a value in the vmodel I want it to be that value and not be changed to my local time. Basically what I want is a dumb time picker, that works like a dropdown. No conversions

You can make a function for this that will set the value of your component in hours & minutes

const hourToTimeStamp = (hours: number, minutes: number = 0) => {
  const now = Date.now()
  const result = new Date(now).setHours(hours, minutes, 0, 0)
  return result
}

[CyberK744]

Hi so have been having the same problem because I this gets the local time (with the +1 hour) right from the start but i found another way to solve this issue, I simply used value-format and formatted-value.
After sending the data you will be getting the time has a string in the format you picked in the value:format, so you can do whatever you want with it at that point on.

<n-time-picker value-format="HH:mm:ss" v-model:formatted-value=""/>

<script setup>
var timeValue = '00:00:00';
</script>

just posting here for the next person needing help on this matter :)

[abj3ct10n]

format="yyyy-MM-dd\'T\'HH:mm:ssXXX"

[volhaliferovich]

@07akioni Can you add the same for a date picker?