8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

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

Himanshu Kandpal 2月前

94 0

日期时间字段使用以下代码显示。提交表单时,我选择了正确的日期和时间,即 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)
  • @JSONDerulo 很棒的用户名 :) 谢谢你的评论。但是,使用后端重现该场景是不可能的。

  • 我尝试将日期从日期选择器转换为 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)
    对于任何帮助都将不胜感激。

    我尝试从浏览器获取时区并自行设置,但没有效果。

  • 我通过在我的钩子中添加 utc 偏移量找到了解决方案。就像这样:

    const [subscribedAfter, setSubscribedAfter] =
        useState(dayjs.utc().utcOffset(0, true));
  • 您使用的是 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'
    

    欲了解更多信息,请参阅 文档

  • 我添加了 AM/PM,发现我的日期提前了 6.5 小时。请查看我更新的问题。如何解决这个问题?

  • ezik 2月前 0 只看Ta
    引用 7

    啊,是的。提前了 5.5 小时。我该如何解决这个差异?createdAt 和 updateAt 日期和时间是正确的,而 date 字段提前了 5.5 小时。我正确地在 datetime-local 字段中添加了日期和时间。

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

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

返回
作者最近主题: