Выбор материалов-Время выбора пользовательского интерфейса не меняется?

#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>