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?