Material UI DatePicker 显示错误的日期

Posted

技术标签:

【中文标题】Material UI DatePicker 显示错误的日期【英文标题】:Material UI DatePicker Showing Wrong Date 【发布时间】:2020-06-08 10:43:56 【问题描述】:

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

我选择了25th,formik中的值是25th,但是form上显示的值是24th。

  "@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>

【问题讨论】:

我认为这可能与时区差异有关。看这里的第一个例子:date-fns.org/docs/Getting-Started#introduction 函数是 format(new Date(2014, 1, 11), 'MM/dd/yyyy'),但结果是 '02/11/2014'。尝试使用这个库的 api(我推荐 moment.js...) 我在第一个示例中寻找什么,我什么也没看到 我已经更新了我的评论 我试图做这样的事情来解决时区问题:format(endOfDay(new Date(date)), 'yyyy-MM-dd') 但没有改变 date-fns.org/v2.0.0-alpha.27/docs/Time-Zones 试试看这里,我想你可能会找到解决方案。我相信它与时区有关。 【参考方案1】:

我也遇到过同样的问题

毕竟我在日期上加了parseISO方法,你需要指定组件的时区。

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

On 值(属性是日期)

<KeyboardDatePicker
  format=DateFormatEnum.DayMonthYearPtBr
  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)



【讨论】:

parseISO 包是我所缺少的。感谢分享这个技巧 什么是 DateFormatEnum?【参考方案2】:

因为 datepicker 采用 UTC ISOformat 输入日期时间 解决方案 - 将 UTC 转换为本地到 ISO 格式

因为服务器只接受 ISO 日期时间,所以我将 UTC 转换为本地时区并以 ISO 格式发送到服务器

在某处声明

function convertUTCDateToLocalDate(date) 
    var newDate = new Date(date.getTime() - date.getTimezoneOffset()*60*1000);
    return newDate;   

并在您需要 ISO 格式 convertUTCDateToLocalDate(date).toISOString() 的本地日期时间时执行此操作

【讨论】:

以上是关于Material UI DatePicker 显示错误的日期的主要内容,如果未能解决你的问题,请参考以下文章

在编辑模式下,Material-ui/DatePicker 中未填充日期

如何去除 Material UI 的 DatePicker 的边框?

Material UI:如何在 DatePicker 之外使用 DatePickerDialog?

无法让 material-ui datepicker 工作

React Js - 清除 Material UI Datepicker

如何替换 react-material-ui datepicker 的导航图标?