可以使用 react-admin DateInput 将 dd/MM/yyyy 等格式更改为 MM/dd/yyyy答案

【问题标题】：Can use react-admin DateInput to change the format like dd/MM/yyyy to MM/dd/yyyy可以使用 react-admin DateInput 将 dd/MM/yyyy 等格式更改为 MM/dd/yyyy
【发布时间】：2020-11-06 11:48:42
【问题描述】：

组件

<DateInput
  options={{ format: "MM/DD/YYYY", clearable: true }}
  className="location-input" label="Purchase Date" source="PurchaseDate" 
  validate={validatePurchaseDate}
/>

【问题讨论】：

您尝试过建议的解决方案吗？

标签： react-admin

【解决方案1】：

从文档中，您可以使用format 和parse 公开方法格式化组件的输入/输出：

const dateFormatter = v => {
  // v is a `Date` object
  if (!(v instanceof Date) || isNaN(v)) return;
  const pad = '00';
  const yy = v.getFullYear().toString();
  const mm = (v.getMonth() + 1).toString();
  const dd = v.getDate().toString();
  return `${yy}-${(pad + mm).slice(-2)}-${(pad + dd).slice(-2)}`;
};

const dateParser = v => {
  // v is a string of "YYYY-MM-DD" format
  const match = /(\d{4})-(\d{2})-(\d{2})/.exec(v);
  if (match === null) return;
  const d = new Date(match[1], parseInt(match[2], 10) - 1, match[3]);
  if (isNaN(d)) return;
  return d;
};

<DateInput source="isodate" format={dateFormatter} parse={dateParser} />

参考：https://marmelab.com/react-admin/Inputs.html#transforming-input-value-tofrom-record

【讨论】：

选择后在我的情况下显示空白输入（“YYYY/MM/DD”），但 dateParser 正在工作

【解决方案2】：

如果这是您所追求的准确且唯一的更改 - 您可以将 locale 设置与以下值一起使用：

“en-US”：MM/dd/yyyy
"en-GB": dd/MM/yyyy

这是一种 hack，但也是一种轻松简单的解决方案。

【讨论】：