Material Ui KeyboardDatepicker - 月份显示无效值

Question

我正在尝试在 ag 网格的单元格编辑器中实现 KeyboardDatepicker。当我从日期选择器弹出窗口中选择一个日期时，月份值显示不正确。我选择的日期是 30-04-2020，它显示的日期是 30-30-2020。我也尝试使用 formatDate 属性来格式化日期。我以正确的格式传递所选值，但日期显示不正确。我正在使用 date-io/moment 版本 1.3.13 和 date-io/date-fns 版本 0.0.2。以前有人遇到过这个问题吗？我确信这是一个微不足道的问题，我错过了一些东西。任何指针将不胜感激。提前致谢。干杯！

更新：

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 }

Answer 1

将 KeyboardDatePicker 与我使用的格式一起使用

format = {moment.localeData().longDateFormat('L')} // In my case dd/mm/yyyy

如果你想使用不同的语言环境，你可以先要求它并使用它

require("moment/locale/en-us");
moment().locale("en-us");
format = {moment().locale(locale).localeData().longDateFormat('L')}

对于值，当日期有值时我使用时刻日期，否则为 null

value={date ? moment(date) : null}

对于 onChange，我使用的是通用格式，因为我不想以语言环境格式存储它

{(date: any) => handleChange(path, date?.format('YYYY-MM-DD'))}