#javascript #reactjs #material-ui
Вопрос:
Я использую компонент выбора даты и времени для выбора материалов и пользовательского интерфейса. Когда в onchange дата была изменена, но не время. Я использую средство выбора даты и времени в formik, я хочу, чтобы формат вывода был ММ/дд/гггг ЧЧ:мм. Однако изначально это отображается правильно. При изменении не отображается правильно. (значение неверно)
При изменении
консольный выход
Tue Aug 31 2021 18:48:00 GMT 0530 (India Standard Time)
Компонент выбора даты и времени
import React from "react";
import { DateTimePicker } from "@material-ui/pickers";
import DateFnsUtils from '@date-io/date-fns'
import { MuiPickersUtilsProvider } from "@material-ui/pickers";
const DateTimePickerField = ({ field, form, ...other }) => {
const currentError = form.errors[field.name];
return (
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<DateTimePicker
clearable
ampm={false}
format='MM/dd/yyyy HH:mm'
disablePast
name={field.name}
inputVariant="outlined"
value={field.value}
helperText={currentError}
error={Boolean(currentError)}
onError={error => {
// handle as a side effect
if (error !== currentError) {
form.setFieldError(field.name, error);
}
}}
{...other}
/>
</MuiPickersUtilsProvider>
);
};
export default DateTimePickerField
Поле Формик
<Grid item xs={12} sm={12} md={3}>
<Field
fullWidth
component={DateTimePickerField}
name='cargoCutOffDateAndTime'
required
value={values.cargoCutOffDateAndTime}
label='Cargo Cut Off Date amp; Time'
onChange={(date) => {
console.log(date)
setFieldValue('cargoCutOffDateAndTime', date)
}}
/>
</Grid>