Angular 17 使用 datetime-local 时显示的时间落后几个小时-datetime-IT问答社区-解决你的IT疑问

Angular 17 使用 datetime-local 时显示的时间落后几个小时

Himanshu Kandpal 2月前

日期时间字段使用以下代码显示。提交表单时，我选择了正确的日期和时间，即 2024 年 7 月 6 日上午 11:43：

日期时间字段使用以下代码显示。我选择了 07/06/2024 11:43 AM 提交表单时的正确日期和时间：

<input type="datetime-local" [(ngModel)]="item.date">

API 调用以以下格式显示数据：

createdAt: "2024-06-07T06:13:51.050Z"
date: "2024-06-07T11:43:00.000Z"
updatedAt: "2024-06-07T06:13:51.050Z"

使用 {{item.createdAt | date: 'dd/MM/yyyy hh:mm a'}} 显示 createdAt 为 07/06/2024 11:43 AM 正确时间。updatedAt 也是同样正确的时间。

但是，使用 {{item.date | date: 'dd/MM/yyyy hh:mm a'}} 显示 date 不 07/06/2024 05:13 PM 正确，并且提前了 6.5 小时。

我位于印度，时区为 +5:30pm。这里可能出了什么问题？

这就像 createdAt 位于 updatedAt 不同的时区，而 date 位于不同的时区。

帖子版权声明 1、本帖标题：Angular 17 使用 datetime-local 时显示的时间落后几个小时
本站网址：http://xjnalaquan.com/
2、本网站的资源部分来源于网络，如有侵权，请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
5、站长邮箱：yeweds@126.com 除非注明，本帖由Himanshu Kandpal在本站《datetime》版块原创发布，转载请注明出处！

最新回复 (0)

最新倒序只看楼主

Noremac 2月前 0 只看Ta

引用 2楼

@JSONDerulo 很棒的用户名 :) 谢谢你的评论。但是，使用后端重现该场景是不可能的。
Dr. Bright 2月前 0 只看Ta

引用 3楼
我尝试将日期从日期选择器转换为 iso 格式，但总是比我的时间晚 3 个小时。我该如何解决这个问题？这是我的代码：'use client';import React, { useEffect, useState } from 'react';

我尝试将日期选择器中的日期转换为 iso 格式，但总是比我的时间晚 3 个小时。我该如何解决这个问题？

这是我的代码：
```
'use client';
import React, { useEffect, useState } from 'react';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
import styles from '@/app/broadcast/broadcast.module.scss';
import Input from '@/components/Input/Input';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import './styles.css';
import dayjs, { Dayjs } from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';

dayjs.extend(utc);
dayjs.extend(timezone);
dayjs.tz.setDefault(Intl.DateTimeFormat().resolvedOptions().timeZone);

const DatePicker = ({...props}) => {
const [subscribedAfter, setSubscribedAfter] =
    useState<Dayjs | null>(dayjs());
  return (
    <>
      <LocalizationProvider dateAdapter={AdapterDayjs}>
        <DesktopDatePicker
          className={styles.form__input_date}
          value={subscribedBefore}
          format={'MMMM DD, YYYY'}
          onChange={(newValue) => setSubscribedBefore(newValue)}
          renderLoading={() =>
            <Input {...props}
            />}
        />
      </LocalizationProvider>
    </>
  );
};
```
这是我的 ISO 格式的日期： 2024-06-30T11：47：42.419Z （实际时间 14:47）
对于任何帮助都将不胜感激。

我尝试从浏览器获取时区并自行设置，但没有效果。
BonyT 2月前 0 只看Ta

引用 4楼
我通过在我的钩子中添加 utc 偏移量找到了解决方案。就像这样：
const [subscribedAfter, setSubscribedAfter] = useState(dayjs.utc().utcOffset(0, true));
Rob Williams 2月前 0 只看Ta

引用 5楼
您使用的是 hh 12 小时制。中午过后，时间会从 01 点重新开始。另外，您没有使用 AM/PM 前缀，这会让时间看起来不对。但日期本身完全没问题，只是格式出乎意料。

如果要添加 AM/PM 前缀，请 a 在末尾添加：
```
{{item.date | date: 'dd/MM/yyyy hh:mm a'}} -> '07/06/2024 05:13 PM'
```
或者如果您想使用 24 小时格式，请替换 hh 为 HH ：
```
{{item.date | date: 'dd/MM/yyyy HH:mm'}} -> '07/06/2024 17:13'
```
欲了解更多信息，请参阅文档
user24241471 2月前 0 只看Ta

引用 6楼

我添加了 AM/PM，发现我的日期提前了 6.5 小时。请查看我更新的问题。如何解决这个问题？
ezik 2月前 0 只看Ta

引用 7楼

啊，是的。提前了 5.5 小时。我该如何解决这个差异？createdAt 和 updateAt 日期和时间是正确的，而 date 字段提前了 5.5 小时。我正确地在 datetime-local 字段中添加了日期和时间。
Marvin van Aalst 2月前 0 只看Ta

引用 8楼

@ElaineByene \'2024-06-07T11:43:00.000Z\' UTC + 5:30 小时（印度时区）=> 07/06/2024 05:13 PM Javascirpt 显示正确的日期，只需继续开发，没有问题需要修复:) 如果您想显示 UTC 日期，请检查下面已删除的答案！
yshavit 2月前 0 只看Ta

引用 9楼

@NarenMurali 但我提交的时间是上午 11:43，结果被转换为下午 5:13，因此日期应该是 \'2024-06-07T06:13:51.050Z\'，与 createdAt 和 updatedAt 相同。另外，我看不到已删除的答案！