Material UI DatePicker 显示错误的日期
Material UI DatePicker Showing Wrong Date
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>
我遇到过同样的问题
毕竟我在日期上添加了一个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)
}
这是因为日期选择器采用 UTC ISO 格式输入日期时间
解决方案 - 将 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 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>
我遇到过同样的问题
毕竟我在日期上添加了一个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)
}
这是因为日期选择器采用 UTC ISO 格式输入日期时间 解决方案 - 将 UTC 转换为本地格式到 ISO 格式
因为服务器只接受 ISO 日期时间所以我将 UTC 转换为本地时区并以 ISO 格式将其发送到服务器
在某处声明这个
function convertUTCDateToLocalDate(date) {
var newDate = new Date(date.getTime() - date.getTimezoneOffset()*60*1000);
return newDate;
}
并在需要 ISO 格式的本地日期时间的地方执行此操作 convertUTCDateToLocalDate(date).toISOString()