重大的UI DatePicker显示错误的日期 [英] Material UI DatePicker Showing Wrong Date
本文介绍了重大的UI DatePicker显示错误的日期的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
材料用户界面选择器"中显示的日期比所选日期晚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屋!
查看全文