如何默认 formik 日期和时间字段以显示占位符值答案

【问题标题】：How to default both a formik date and time field to display a placeholder value如何默认 formik 日期和时间字段以显示占位符值
【发布时间】：2021-08-07 12:34:01
【问题描述】：

我正在开发一个使用 Formik for React 的项目，特别是以下 NPM 包 - https://www.npmjs.com/package/formik-material-ui-pickers

我在这两个 npm 包中使用 CodeSandbox 链接/示例中的代码 -

https://codesandbox.io/s/915qlr56rp?file=/src/index.tsx:4770-4987

    <Field component={TimePicker} name="time" label="Time" />
    <Field component={DatePicker} name="date" label="Date" />

我的问题是，我如何默认将日期显示为 DD-MM-YYYY 作为占位符以及默认显示时间，而不是在启动时显示日期和时间HH:MI:SS 作为占位符？

只有当用户选择日期和时间时，我才希望它显示和更新 Formik 的初始值。

我已经在 https://material-ui-pickers.dev/api/TimePicker 和 https://material-ui-pickers.dev/api/DatePicker 检查了文档，但看不到任何允许默认值或占位符值的内容。

【问题讨论】：

标签： reactjs datepicker formik timepicker formik-material-ui

【解决方案1】：

你需要做一个自定义的 DatePicker 并将格式放入其中

解决方案


const CustomDatePicker = ({...props}) => (
    <DatePicker format="dd-MM-yyyy" {...props} />
);

<Field component={CustomDatePicker} name="date" label="Date" />
// Do similar for TimePicker

【讨论】：

您好，感谢您的帖子，但我认为您可能没有正确理解我的问题。我可以接受format="dd-MM-yyyy" 的日期格式，但实际上我所追求的是默认值 null 和显示格式的占位符值需要在“dd-MM-yyyy”中但要开始与，我需要日期为空。希望这是有道理的。如果没有，请告诉我。