Material UI DatePicker 显示错误的日期

2024-01-04

Material UI Pickers 中显示的日期比所选日期晚 1 天:

我选择了25号,formik中的值是25号,但表单上显示的值是24号。

  "@date-io/date-fns": "^1.3.13",
  "date-fns": "^2.9.0",
import DateFnsUtils from '@date-io/date-fns';
import { MuiPickersUtilsProvider, DatePicker } from '@material-ui/pickers';
import { format, addDays } from 'date-fns';

<MuiPickersUtilsProvider utils={DateFnsUtils}>
    <FastField
       as={DatePicker}
       variant="inline"
       disableToolbar
       name="startTime"
       format="PPP"
       onChange={date => {
         console.log(format(date, 'yyyy-MM-dd'));
         setFieldValue('startTime', format(date, 'yyyy-MM-dd'));
       }}
       value={values.startTime}
   />
</MuiPickersUtilsProvider>

我也遇到过同样的问题

毕竟我添加了一个parseISO在我的日期方法中,您需要指定组件的时区。

// import parseISO
import { parseISO } from 'date-fns'; 

按价值(即日期的属性)

<KeyboardDatePicker
  format={'dd/MM/yyyy'}
  label="Date"
  value={parseISO(salesPage.dateAt)}
  onChange={handleDateAtOnChange}
/>

关于改变


import { format } from 'date-fns';
import { convertToLocalTime } from 'date-fns-timezone';


export const DEFAULT_DATE_FORMAT = 'yyyy-MM-dd';

/**
 * Format a date to a string
 *
 * @param date
 */
export const formatDate = (date) => {
  if (!date) return new Date().toLocaleString();

  // Get the timezone from browser using native methods
  const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
  const dateTmp = Date.parse(date.toLocaleString());

  const localDate = convertToLocalTime(dateTmp, {
    timeZone: timezone,
  });

  return format(localDate, DEFAULT_DATE_FORMAT);
};

const handleDateAtOnChange = (event) => {
  formatDate(event.target.value)
}


本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Material UI DatePicker 显示错误的日期 的相关文章

随机推荐

  • 使用列表元素的名称向列表中的每个数据框添加一列

    我有一个包含多个数据框的列表 每个列表元素都有一个唯一的名称 结构类似于这个虚拟数据 a lt data frame z rnorm 20 y rnorm 20 b lt data frame z rnorm 30 y rnorm 30 c
  • 我如何创建带有下面文本视图的按钮网格

    Hi 我想创建一个像我 尝试 上面绘制的屏幕 A b c d e f g 和 h 是buttons p 是一个EditText 现在我想要完成的是 当部署在更大或更小的屏幕上或旋转时 会发生以下情况 元素 p 保持相同的高度 但水平尺寸 获
  • C# - 抛出异常时无限循环?

    我有以下代码 protected void ExecuteInTransaction Action action using SQLiteTransaction transaction connection BeginTransaction
  • 当另一个字段发生实际变化时,sql server触发器更新时间字段

    我需要一个触发器 如果 表行的一个或多个字段被更新 该触发器就会更新该行字段 假设您有一个雇员表 如下所示 EmployeeId Name Address ModificationDate 1 Spears 27 Sober Road 2
  • 带缓动的动画画布弧线

    我正在画布上画一个非传统的环形时钟 时间由秒环 秒针 分钟环和小时环表示 我正在使用 webkit mozRequestAnimationFrame 在适当的时间进行绘制 我想修改第二个环以快速动画到下一秒 125ms 250ms 并使用二
  • 如何在Python3中使用自签名证书

    我已在 Windows Server 2012 R2 WSUS 服务器 10 66 194 98 Dec15 cer 中生成了自签名证书 并在所有 WSUS 管理 网站中启用了 SSL 现在我想在 python 代码中使用它来与服务器联系
  • Android USB API:在充电和数据发送之间切换

    我开始使用 Android USB API 将数据从 Arduino 发送到 Android 设备 是否可以以编程方式在发送 接收数据之间切换并只为 Android 手机充电 我知道你不能同时做这两件事 而且 因为你必须打开一个FileIn
  • NSUserDefaults 有哪些限制?

    在 iPhone 中永久存储数据通常是使用 Core Data 或 sqlite3 完成的 大多数人更喜欢使用 NSUserDefaults 作为应用程序首选项的存储 而不是将其用作普通数据库 例如 sqlite 我发现 NSUserDef
  • Charts Pod 未降级

    我正在使用 Xcode 8 3 和 swift 3 为了使用图表库 我需要使用 Charts 3 0 2 但 Cocoapods 始终安装最新的库 我尝试执行以下命令 pod install pod update but none are
  • 以编程方式将活动指示器添加到视图[重复]

    这个问题在这里已经有答案了 可能的重复 在应用程序启动期间显示活动指示器 https stackoverflow com questions 6849072 show activity indicator during applicatio
  • 如何在Firebase Android中24小时内每次更新一个值

    我有一个值在特定任务完成后设置为 1 但我希望在任务完成后 24 小时后将其设置回 0 为了解决这个问题 我建议您使用Firebase 的云功能 https firebase google com docs functions Cloud
  • 如果 !ModelState.IsValid 则复选框选中值丢失

    我在这里的方法可能完全错误 但我正在慢慢学习 MVC 我有一个表单 用户必须根据此模型选择多个 或不选择 模块 public class MyProductModule public string ModuleName get set pu
  • 如何在 IntelliJ 插件项目中启用 gradle

    当您创建 IntelliJ 13 插件项目时 您不能同时选择将其设为 Gradle 项目 如何启动 Gradle 支持的插件开发项目 IntelliJ 的当前版本 13 1 2 仅支持 Gradle 集成 最高版本为 1 10 将此版本的
  • 运行 Windows 10 的 Raspberry Pi2:无 PWM

    我有一个运行 Windows 10 的 Raspberry Pi2 我想使用 PWM 控制伺服系统 移植一些 netduino 代码 除了 12 GPIO 18 之外 Pi gt 上似乎根本没有 PWM 引脚 有人可以证实这一点吗 Than
  • 如何将 Facelets 组合与来自另一个上下文的文件结合使用

    我有一个使用组合 用于页面模板 的应用程序 但我们认为创建一个 Web 应用程序 war 来将所有应用程序共享的所有模板托管在所有应用程序的同一主机中 如何包含来自其他上下文的模板 这时候我使用的是import from http requ
  • 无效选项:--autospec

    usr local bin ruby rrubygems e require redgreen usr local lib ruby gems 1 8 gems rspec 1 3 0 bin spec autospec
  • 如何操作 ajax 响应中返回的 html?

    我已经为此搜索并尝试了很多方法 但根本无法使其发挥作用 我有以下内容 ajax url g html type GET dataType html timeout 4000 cache false error function reques
  • C++ 参数包扩展

    下面的代码无法编译 请参阅代码下面的错误 你能解释一下为什么吗 template
  • 如何创建一个能够包装实例、类和静态方法的Python类装饰器?

    我想创建一个Python类装饰器 这将能够无缝包装类可能具有的所有方法类型 实例 类和静态 这是我现在的代码 其中破坏它的部分已注释 def wrapItUp method def wrapped args kwargs print Thi
  • Material UI DatePicker 显示错误的日期

    Material UI Pickers 中显示的日期比所选日期晚 1 天 我选择了25号 formik中的值是25号 但表单上显示的值是24号 date io date fns 1 3 13 date fns 2 9 0 import Da