7

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

我选择了 25th，formik 中的值是 25th，但表单上显示的值是 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>

在此处输入图像描述

4

2 回答 2

9

我遇到了同样的问题

毕竟我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)
}
于 2020-11-12T14:21:29.807 回答
1

这是因为 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()

于 2021-10-24T20:57:45.323 回答