重大的UI DatePicker显示错误的日期 [英] Material UI DatePicker Showing Wrong Date

问题描述

材料用户界面选择器"中显示的日期比所选日期晚1天:

The displayed date in Material UI Pickers is 1 day behind the selected date:

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

I selected 25th, the value in formik is 25th but the value displayed on the form is 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>

推荐答案

我遇到了同样的问题

毕竟，我在约会中添加了 parseISO 方法，您需要指定组件的时区.

After all, I added a parseISO method on my date, you need to specify the timezone of the component.

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

有价证券(即日期的财产)

On value (property which is date)

<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)
}

这篇关于重大的UI DatePicker显示错误的日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！