How to default both a formik date and time field to display a placeholder value

0
votes

I am working on a project that is using Formik for React specifically the following NPM package - https://www.npmjs.com/package/formik-material-ui-pickers

I am using the code from the CodeSandbox link/example within this npm package for both -

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" />

My question is, instead of a date and time appearing at start-up, how can I default the date to display DD-MM-YYYY as a placeholder as well as default the time to display HH:MI:SS as a placeholder?

Only when the user selects a date and time, do I want it to display and update Formik's initialValues.

I have checked the doco over at https://material-ui-pickers.dev/api/TimePicker and https://material-ui-pickers.dev/api/DatePicker and cannot see anything that will allow a default or placeholder value.

1
reactjsdatepickerformiktimepickerformik-material-ui

1 Answers

0
votes

You need to do a custom DatePicker and put format into it

Solution


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

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