Материал Ui KeyboardDatepicker - месяц показывает недопустимое значение

Question

Я пытаюсь реализовать KeyboardDatepicker в редакторе ячеек сетки ag. Когда я выбираю дату из всплывающего окна выбора даты, значение месяца отображается неправильно. Дата, которую я выбрал, - 30-04-2020, а показанная дата - 30-30-2020. Я попытался использовать атрибут formatDate для форматирования даты. Я передаю выбранное значение в правильном формате, но дата отображается неправильно. Я использую версию 1.3.13 date-io / moment и версию 0.0.2 date-io / date-fns. Кто-нибудь сталкивался с этой проблемой раньше? Я уверен, что это тривиальная проблема, и я что-то упускаю. Любые указатели будут высоко оценены. Заранее спасибо. Приветствия!

Обновление:

Datepicker_component_grid. js

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
import DateFnsUtils from '@date-io/date-fns'
import moment from 'moment'
import format from 'date-fns/format'
import Grid from '@material-ui/core/Grid'
import { SampleDatePickerWithUtils } from '../Sample_datepicker_with_utils';

export class DateEditor extends Component {
  constructor(props) {
    super(props)
    this.onDateChange = this.onDateChange.bind(this)
    this.state = {
      value: null
    }
  }
  componentDidMount() {

  }

  componentWillUnmount() {

  }


  componentDidUpdate() {
    this.focus()
  }

  focus() {
    window.setTimeout(() => {
      let dateContainer = ReactDOM.findDOMNode(this.refs.dateContainer)
      if (dateContainer) {
        dateContainer.focus()
      }
    })
  }

  getValue() {
    return this.state.value

  }

  isPopup() {
    return false
  }

  onDateChange(date) {
    this.setState({
      value: date
    },
      () => this.props.api.stopEditing()
    )
  }


  render() {

    let storeValue = this.props.value

    return (
      <span
        ref='dateContainer'
        tabIndex={1}>
        <SampleDatePickerWithUtils labelName={' '} schemaLocation='rowDate' isDisabled={false}
          displayFormat='yyyy-mm-dd'
          disableFuture={false}
          onDateChange={this.onDateChange}
          disablePast={false}
          storeVal={storeValue}
          gridSize={{ sm: 2, md: 1, lg: 1 }}></SampleDatePickerWithUtils>

      </span>
    )
  }
}

SampleDatePickerWithUtils. js

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles'
import { updateFieldState, onTabOut, updateFocus } from 'actions/ticket_actions';
import { bindActionCreators } from 'redux';
import { getGridSizing } from 'styles/Sample_core_theme';
import { DatePicker, KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
import { formatToYMD } from 'core/schema_translators/utils';
import EventIcon from '@material-ui/icons/Event';
import DateFnsUtils from '@date-io/date-fns'
import { SampleFieldComponent } from './base_components';
import { registerComponent } from 'actions/Sample_core_actions';
import { connect } from 'react-redux';
const moment = require('moment');
class MyDateFnsUtils extends DateFnsUtils {
  startOfMonth(date) {
    let dat = moment(date).startOf('month').toDate()
    return dat
  }
}

class _SampleDatePickerWithUtils extends SampleFieldComponent {
  constructor(props) {
    super(props);
    let formattedDate = props.storeVal ? formatToYMD(props.storeVal) : null
    this.state = {
      value: formattedDate,
      errorMsg: '',
      isError: false,
    }
    this.styleProps = { disableUnderline: true }
    this.inputLabelProps = { shrink: true }
    this.onChangeCallback = this.onChangeCallback.bind(this)
    // this.onBlurCallback = this.onBlurCallback.bind(this)
    props.registerComponent(props.schemaLocation)
  }

  componentWillMount() {
    this.props.registerComponent(this.props.schemaLocation)

    if (this.props.manageValueManually) {
      let dateValue = this.props.overriddenValue ? formatToYMD(this.props.overriddenValue) : null
      this.props.updateFieldState(this.props.schemaLocation, dateValue)
    }

  }

  componentDidMount() {
    if (this.props.focusField) { this.focusDomElement() }
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.manageValueManually) {
      if (nextProps.overriddenValue !== this.props.overriddenValue) {
        let dateValue = nextProps.overriddenValue ? formatToYMD(nextProps.overriddenValue) : null
        this.props.updateFieldState(this.props.schemaLocation, dateValue)
        this.props.onTabOut(this.props.schemaLocation)
      }
    }
  }

  onChangeCallback(date) {
    let formattedDate = date ? formatToYMD(date) : null
    if (!this.props.manageValueManually) {
      this.props.updateFieldState(this.props.schemaLocation, formattedDate)
      this.props.onTabOut(this.props.schemaLocation) //this is required because the value is selected in a date picker
    }
    this.props.onDateChange(formattedDate)
  }


  render() {
    const gridSizing = getGridSizing(this.props)
    const { classes } = this.props
    return (
      <MuiPickersUtilsProvider utils={MyDateFnsUtils}>
        <KeyboardDatePicker

          keyboard={(!this.props.isDisabled).toString()}
          keyboardIcon={<EventIcon style={{ fontSize: '22px', color: 'red' }} />}
          clearable
          disabled={this.props.isDisabled}
          error={this.state.isError}
          helperText={this.state.errorMsg}
          InputProps={{ className: classes.inputProps }}
          label={this.props.labelName === '' ? this.props.schemaLocation : this.props.labelName}
          value='2020-04-30'
          onChange={this.onChangeCallback}
          // format={this.props.displayFormat}
          format='yyyy-mm-dd'
          onBlur={this.onBlurCallback}
          InputLabelProps={this.inputLabelProps}
          disableFuture={this.props.disableFuture}
          disablePast={this.props.disablePast}
        />
      </MuiPickersUtilsProvider>
    );
  }
}


const styles = (theme) => ({
  inputProps: {
    marginTop: '0px !important',
    // fontSize: '14px',
    border: 0,
    '& input': {
      fontSize: '14px',
      '&:focus': {
        boxSizing: 'content-box'
      }
    }
  }
})

const SampleDatePickerWithUtils = withStyles(styles)(_SampleDatePickerWithUtils)
export { SampleDatePickerWithUtils }